ファビコンを設定しよう。

今回は、ファビコン（favicon）についてです。
ファビコンはWEBブラウザのタブに表示される小さなアイコン等の画像のことで、ブックマークした際にも表示されます。

このファビコンにはどういった意味があるのか、どうやって作成して設定するのかを解説していきたいと思います。

ファビコンとは

ファビコンとは、「Favorite（お気に入り） + Icon（アイコン）」が派生した用語で、ブラウザでタブ表示した際にサイト名の横に表示されるアイコンのことです。

赤枠で囲ったところがファビコンになります。

Googleのサイトでは、検索エンジンの下に頻繁にアクセスするページのファビコンとサイト名が表示されるようになっています。

ファビコンは自分で設定しない限り何も表示されません。設定していなくても大きな問題はありませんが、多くのページでファビコンを設定しています。
なぜ、ファビコンを設定した方がいいのでしょうか。次に説明していきます。

ファビコンを設定するメリット

瞬時にどのサイトかわかる

たとえば、上のように3つタブが出ていたとします。
一番左がファビコンの無いサイトですが、印象が薄くサイト名を見なければ何のサイトかわかりません。一方でファビコンのあるサイトは、ファビコンに指定されているアイコンを覚えてしまえばサイト名を見ずとも何のサイトかが一瞬にしてわかります。

ファビコンを設定することは、訪問者の目線になってサイト設計をしているという大きなポイントといえます。

ブランド力がつく

ほとんどの企業やショップのサイトでファビコンが起用されているように、ブランド力や信頼性を持たせるためにファビコンは欠かせません。
これは会社や店のロゴマークでも同じことが言えますが、ロゴマークが無い会社や店だと規模の小さい団体だと錯覚させてしまい、信頼を逃してしまいます。

たった一手間、ロゴマークやファビコンを用意することでブランド力をつけることができます。

ファビコン画像の用意

ファビコンの概要と必要性を理解したら、早速ファビコンの画像を用意しましょう。
サイズは基本的には「16px × 16px」です。
ファイル形式は「png」や「ico」で作成します。
ファイル名は、「favicon.png」や「favicon.ico」などにするのが一般的です。

ただし、表示される場所によっては「32px × 32px」など大きくなる場合もありますので、できればico形式にして複数サイズに対応できるように作りましょう。
このico形式は特殊な形式なので、次に「ico」でファイルを保存する方法を説明します。