favicon(ファビコン)とは？設定方法や作成方法について解説

皆さんはFavicon(ファビコン)をご存知でしょうか？
ファビコンとはWebブラウザを開いた際に画面上部のタブに表示される画像などを指します。

2019年5月以降はGoogleの仕様変更により、検索結果の画面にもそれぞれのwebサイトのファビコンが表示されるようになりました。
今回の記事ではFavicon(ファビコン)について、設定方法や作成方法について解説していきます。

▶東京のホームページ制作会社おすすめ15選！選び方と注意点を解説

ファビコンとは

Favicon(ファビコン)は「Favorite icon(お気に入りのアイコン)」から創られたIT用語です。
Internet Explorer5から追加された機能で、Web上で検索ブラウザでサイトを表示した際にタブに表示される画像のことをファビコンと言います。

現在では、スマートフォンなどでWebページをブックマークとして保存した際にも表示されるようになっています。
実際に表示されるファビコンは以下のようになります。

上記画像のように、Webページやサイトを正方形の小さい画像で表すのがFavicon(ファビコン)の役目です。
ファビコンは設定せずともWebサイトは正常に動作しますが、他のサイトと差別化やユーザーの記憶に留まるようにするため、現在では多くのサイトが設定しています。

▶ホームページの管理・運用代行会社30選！サービスや費用を徹底比較

ファビコンが表示される場所

ファビコンとはどのようなものか知っていただけたかと思いますので、続いてはファビコンが実際に表示される場所を詳しくご紹介していきます。

Webブラウザでページを開くとタブに表示される

恐らくパソコンを利用されている方は一番多く目にする機会があるのがこちらかと思います。
現在ではスマートフォンのタブにもファビコンが対応し表示されています。

見る側には問題はないのですが、設置する側は検索ブラウザ(Chrome,Internet Explorer,FireFoxなど)ごとに、個別で設定が必要な場合もありますので、注意が必要となります。

ブックマークした際に表示される

ファビコンはページをブックマークした際にも表示されます。ブックマークはユーザーがページを何度も見るからすぐに見れるようにしたいと、お気に入り登録しておくようなものとなっています。
ブックマーク一覧に表示された際にも、ファビコンを設定しておくことでユーザーは他のサイトと違いがわかり、他のサイトとの差別化や、覚えてもらえる要因の一つとしてファビコンが役立ちます。

スマートフォンで検索エンジンを利用して検索した際の検索結果画面に表示される

最近になってファビコンが表示されるようになった、スマートフォンでの検索結果画面。
2019年5月22日に発表されていました。

スマートフォンでは、検索結果画面の各サイトのURLの横にファビコンが表示されるようになりました。
これにより、よりユーザーからファビコンを見られることも増えたため、設定しておく重要性が高まったといえます。

ファビコンの作成方法

ここまででファビコンがどのようなもので、どこに表示されるかがわかっていただけたかと思いますので、続いてはファビコンの作成方法をいくつかご紹介していきます。

ファビコンは.icoで作成する

.icoとはその名の通り、アイコン(icon)の画像データに用いられるファイルの拡張子になります。
基本的には32×32ドットで構成されるビットマップ形式の画像データです。
こちらのファイルの作成方法は後ほど説明いたします。

Googleのガイドライン従う

ファビコンを作成、設置するにあたりGoogleがガイドラインを発表しています。
そちらを遵守して作成することで、おおよそ他の検索ブラウザでも表示が可能かと思いますので、ガイドラインの内容を簡単にご紹介していきます。

• ・クローラーがファビコンとファイルをクロールできるようにすること
• ・ファビコンがサイトのブランドを視覚的に表しており、検索結果を見た際に一目で見分けられるようになっていること
• ・ファビコンのサイズは48の倍数のピクセルで構成されていること(48×48,96×96など)
• ・Googleでは16×16で自動で変換され表示するため、正しく表示されるか確認すること
• ・わいせつな表現やヘイト表現に関連するものなど不適切と判断されたファビコンは表示されません。自動的にデフォルトのものに入れ替えて表示されます。

ファビコンに設定する画像を作成する

ガイドラインについても知っていただけたかと思いますので、続いてはファビコンの作成方法をご紹介していきます。

上記ガイドラインにも記してあるように「Webページ全体のイメージや統一感があること」「視覚的にわかりやすくシンプルなもの」「目を引いて覚えやすいデザイン」であることが好ましいです。

Photoshopなどで作成することもできますが、簡単に作成できるツールもありますのでそちらを次のセクションでご紹介していきます。

作成に便利なツールの紹介

Photoshopなどのツールも使えないことや、素早く簡単に作成したいという方に向けて簡単に作成できるツールをご紹介します。

favicon.cc

こちらは海外のファビコン作成ツールになりますが、筆者は一番使いやすいと思っております。
会員登録やソフトのダウンロードなどが必要ないためすぐに使用することが可能です。

こちらのサイトでファビコンを作成するには色を選択して、ページにあるカンバスに色を塗っていくだけです。
ピクセルごとに色を塗ることができるため、スピーディーに作成が可能です。
こちらのサイトのファビコンはユーザーが作成したものがリアルタイムで表示されるため、実際に設置した際にどのようになるかが見てわかります。

ファビコンの設定方法

ファビコンの準備ができたらいよいよ実装です。実装の方法についてこちらで簡単に解説いたします。

HTMLを編集する

指定のWebページのHTMLもしくはPHPファイルのヘッダー部分に記述する必要があります。
ファビコンは表示させるブラウザにより記述する構文が異なります。

基本的なブラウザ(Chrome,IE11,FireFox,Safari,Opera,Edge)の場合には以下のコードをヘッダ部分に記述してください。
これはサイト内のimageというフォルダ内にfavicon.icoというファイルが格納されていると表示されますので、ファイルの格納場所にも注意が必要です。

<link rel="icon" href="/image/favicon.ico">

基本的には上記のコードで表示は可能かと思いますが、IE11の場合にはpngやgifも表示することが可能です。
pngやgifを設定する場合には以下のコードをお使いください。

<link rel="icon" type="image/png" href="/image/favicon.png">

<link rel="icon" type="image/gif" href="/image/favicon.gif">

ファビコンの設定方法 | まとめ

ファビコンとは、ブラウザのタブ部分に表示される画像です。現在ではスマートフォンで検索した際の検索結果画面にも表示されます。

現在ではファビコンを設定しているサイトがほとんどですので、Webサイトやページを作成した際には設置することをお忘れなく。
簡単かつユーザーの記憶に残るファビコンを作成するのが良いです。作成する際にはガイドラインを遵守して作成してください。

Webサイト制作等でお困りの方は是非弊社にお任せください。
下記ボタンからお気兼ねなくご相談ください。

お問い合わせはコチラから