favicon.icoでサイトを飾ろう

favicon.icoって何？

favicon.icoはサイトをお気に入り（ブックマーク）に登録したときに、お気に入り（ブックマーク）に表示されるアイコンです。mixiだとmのマークとかですね。

Firefoxを使っている場合、アドレスバーの左や、タブにも表示され、サイトの顔とも言えるものです。（IE6では登録しているといつの間にか消えたり、IE7betaでは表示すらされなかったり、MSは何がしたいんだ…いったい）

先週からちょこちょこいじっていますが、Odysseygateではビーグル犬をfaviconにしてみました。今は亡き愛犬ペロです。しばらく眺めていると…？

どうやって作るの？

このfavicon、作るのはとってもカンタン。私が作ったfaviconもドット絵で書いたGIF画像の拡張子を.icoに変えただけです。

いくつか作り方をまとめると、

photoshopやpaintなどで画像を作って拡張子を.icoとする。
アイコン作成ソフトを使う。
- ドラッグ&ドロップ画像変換
- @icon変換
Favicon Generaterを使ってみる。こんなのとか。

どうやってサイトに表示するの？

これもとってもカンタン。ブラウザはrootディレクトリにfavicon.icoを探しに行って自動的に表示してくれます。サイト全体に一つのアイコンを表示したい場合はこれでOK。

個別のページやカテゴリに個別のfaviconを指定したい場合は<link rel=”shortcut icon” href=”favicon.ico” />という形で指定してやればOKです。WordPressに組み込む場合もheader.phpに条件指定して放り込んでやればOK。とってもカンタンなのでした。