ファビコン_001
favicon(ファビコン)とは、ブラウザ上に出てくる小さなアイコンの事をいいます。お気に入りのところに出てくるアイコン(Favorite)の(Icon)からfav + iconという言葉になったのです。

このfavicon(ファビコン)を設置することによって、たくさんある「お気に入り」の中に埋もれにくくなるといった効果を得ることができます。

同じアイコンのお気に入りが沢山あると、なかなか分かりにくいですよね。でも、このfavicon(ファビコン)を上手く設置すればあなたのサイトをアピールすることができるのです。

さて、言葉で説明するより、実物を見ていただいた方が早いと思います。早速ですが、本ブログをブックマークしてみてください。(冗談ですけど、実際にブックマークしてくれたらうれしいです。)

ブックマークが嫌な方とか、実例を早く見たい方のために、下に画像を示します。

ファビコン例

経営マンガでは「たぬきのトレードマーク」が表示されます。なお、上のまんがの『経』のマークは以前の当サイトのファビコンです。

このfavicon(ファビコン)があることで、沢山お気に入りがあっても、自分の運営しているサイトを目立たせることができるのです。

■faviconの設置方法と注意点

さて、このファビコンですがつくのは簡単です。まずは小さな画像(png形式が一般的です)を用意しましょう。サイズは16×16とか32×32ピクセルぐらいの正方形がいいですね。

そしてサイトを設置しているサービスの説明に従って設置します。

なお、すごく小さな画像になるのでごちゃごちゃした画像を作っても意味がありません。うちのサイトは遠目でたぬきっぽく見えれば十分だと割り切って作っている感じです。また、当然ですが著作権を自分で保有していない画像については使わないようにするのが重要です。

■表示されない?ファビコンの設定について

ファビコンを作って設定しても表示されないこともあります。まずはブラウザの再読み込みを試してみてください。

それでも駄目なら、キャッシュを削除する事をおすすめします。(通信量を減らして素早く表示するためにブラウザは古い情報を記録しておき、そちらを参照する事があります。)

また、技術的な話になってしまいますが、<link rel="icon" href="/favicon.png" type="image/png">と言った形でHTMLの中で明示的に記述する事でブラウザの認識連れを避けることができたりします。

この場合、ファイル名の確認も重要だったりします上のHTMLで記載しているファイル名の「favicon.png」になっているかどうかの確認も大切だったりします。

関連用語
CI