Image: Wandering around the world

favicon.icoでサイトを飾ろう

favicon.icoって何?

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

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

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

どうやって作るの?

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

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

  1. photoshopやpaintなどで画像を作って拡張子を.icoとする。
  2. アイコン作成ソフトを使う。
  3. Favicon Generaterを使ってみる。こんなのとか。

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

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

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

2個のトラックバック

  1. Web Graphics » Blog Archive » Favicon.ico (ghostly web graphics) さんからのコメント 2006/9/3 日曜日, 5:22:42

    [...] favicon.icofavicon.ico 2006/9/2 19:52:44 favicon.ico favicon.ico Firefox… [...]

  2. Consultant's Story - Life Hacks - by Zero Cool さんからのコメント 2007/1/18 木曜日, 8:31:38

    Favicon 設定完了!…

    「小さなことからこつこつと」ってどこかで聞いたことがありますよね。本当は、まずはサイトに影響が少ないところから改良をすることが重要なんでしょうけど、私はいつも影響が大き (more…)

コメントを書く

Your email is never shared. * 印の項目は必須項目です。

*
*