「favicon」画像の作成方法とサイトへの設置の仕方

Webサイトに「favicon」を設定することがスタンダードになってきているようです。

faviconとはブラウザのタブ、もしくはURLの先頭のほうに表示される、そのサイトオリジナルの画像アイコンのことです。もともとは「favorite icon」だったようですね。

私も早速、このサイトに設置してみました。

画像サイズは16×16、または32×32が一般的のようです。gifやpngで作成した画像を以下のサイトで拡張子「.ico」の形式に変換します。
Favicon Generator – http://favicon-generator.org/
そのほかにもfaviconを作成する専用サイトはいろいろあるようです。

さて、作成した「favicon.ico」をサーバにアップロードします。そしてHTMLファイルのヘッダ部分に以下のコードを追加します。クロスブラウザ対策なのかどうか、２つ指定してあげたほうがよいみたいです。

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />

ブラウザに表示されているでしょうか？ちなみにFirefoxではキャッシュか何かで、なかなか表示されないようです。。。

【追記】
上のサイトだと画像サイズ調整が微妙で、生成されたfaviconが欠けることもあるようです。そこで、別のサイトを探していたのですが以下のサイトの方が優良のようです。
ファビコン作成。favicon.ico 無料で透過マルチアイコンが作れます。 – http://ao-system.net/favicon/
ただ、私の画像保存方法が悪いのか、PNG透過画像は失敗してしまいます。GIF透過画像では成功しました。