ブログ
ファビコン（favicon）とは？
ファビコン（favicon）というのは、Webページを閲覧している際、タブの左側などに表示されているアイコンのことを指します。
由来は「favorite icon（フェイバリット・アイコン）」です。縮めて、「favicon（ファビコン）」と呼ぶようになったわけですね。
もともとはWebページをお気に入りに登録した時に表示されるアイコン、ということだったのですが、時を経て今ではお気に入り登録せずともWEBページのアイコンとして様々なところで表示されています。
ファビコンが表示される場所
ページタブの左側
サイトを閲覧しているとき、ページタブの左側に表示されます。
ブックマークアイコン
ブックマークをすると、ブックマークバーにファビコンが表示されます。
検索結果
スマホやタブレットで検索した時に表示されます。
スマホのショートカット
スマホでWebページのショートカットをホーム画面に作成した際のアイコンとして表示されます。
ファビコンを設定するメリット
ファビコンの概要についてはだいたい理解いただけたかと思います。ファビコンを作成し設定することにはWEBサイトにとってかなりメリットがあります。
認知度の向上
ファビコンを設定することによってWEBサイト、および企業の認知度を上げることができるかと思います。ファビコンは常にタブの左側に表示されているので、ページタイトルよりも目立つかもしれませんね。
ですが、企業のロゴやイメージカラーなどから極端に逸脱したデザインにしてしまうと、その効果は薄いといえます。逆にそれが面白く感じる場合もあるかもしれませんが、認知度の向上という点でいえば、たいていの場合は企業のロゴやイメージに沿ったものがふさわしいです。
ブランディングにつながる
認知度のお話に通ずるお話かもしれませんが、ファビコンは自由にデザインできるため、企業独自のロゴや特徴的なデザインを用いることで、Webサイトのブランディングができます。
ファビコンの設置は企業のイメージを伝えるには非常に有効な手段です。多くの企業では、すでに存在するロゴやデザインをファビコンに反映していることがあります。ファビコンは非常に小さなアイコンですので、デザインはシンプルだけれども目を引くものにしましょう。
ファビコンの作成方法
基本はWEBデザインと一緒に作ります。ファビコンを作成するツールなどもあります。
画像サイズ
ファビコン画像のサイズは用途によって適切なサイズがあり、種類が非常に多いです。代表的なものだけを紹介します。
- 16px × 16px：ブラウザのタブに使用されるサイズ。
- 32px × 32px：ブックマークのアイコンに使用されるサイズ。
- 180px × 180px：iOS、Androidなどのスマホのホーム画面アイコンに使用されるサイズ。
といった具合でしょうか。本来はもう少し細かいですが、基本はこのあたりのサイズがあれば問題ないハズ。
とは言っても、“ico”ファイルは自動的に適したサイズに縮小されるため、大きめのサイズでひとつだけ用意しておくという手もあります。（上記のようにサイズを指定するのは綺麗に見せるためなので、すべてのサイズを用意する必要はありません。）
ファイル形式
ファビコンは画像ファイルですが、少し特殊で通常の画像とは異なります。
基本的にfavicon（ファビコン）のファイルフォーマットは「ico」で書き出す必要があります。中にはpng対応しているブラウザもありますが、バージョンによって異なるため“ico”形式の方が無難ですね。png形式の画像をico形式に変換してくれるツールも存在します。
ひとつ、気をつけねばならないのは180px × 180pxのスマホのホーム画面アイコンは“png”形式にしなければいけないという点です。ico形式のみではスマホのホーム画面のアイコンに対応できないため、別途png形式のものを用意しなければなりません。
ファビコンを有効活用しよう
ファビコンは非常に小さいアイコンではありますが、Webサイトや企業の認知度を高め、ブランディングにつながる重要な役割を持っています。
設置にも複雑な作業はないため、Webサイトを作成する際はぜひファビコンを設置しましょう。