(Web)サイトのアイコン(Favicon)を表示させる

お気に入りやタブ等にサイトのアイコンが表示されることがあると思います。

これをFavicon(ファビコン)というらしいです。

↓これです。

恥ずかしながらいままで知りませんでした。

もともとはIEのお気に入りに登録時の表示だけだったようですが、最近の主要ブラウザはアクセスしただけでタブやアドレスバーに表示するようなってます。（ちなみに正式な標準規格ではないようです)

ということで、faviconをブラウザに表示させる方法です。

まずアイコンを作成します。サイズは16x16にしました。(32x32でもOKみたいです。デスクトップ上にお気に入りのリンクを置くことを考えると32x32のほうがいいのかもしれません)

さて、faviconを表示させる方法は2つあります。

■そのサイト全体に共通のfaviconを表示させる

この方法はhtmlを触る必要がないので、サイト全体で共通faviconにする場合はお勧めです。

作成したアイコンをアイコンの名前をfavicon.icoにして、サイトのトップディレクトリに配置します。

たったこれだけで、OKです。あとはブラウザがアクセス時に "/favicon.ico" を勝手に取得してくれます。

■ページ毎に違うfaviconを表示させる

これにはHTMLの head に link 属性を指定してやる必要があります。


 rel="shortcut icon" href="/img/icon.ico">

これも簡単ですね。

ブラウザで確認するときの注意

基本的にキャッシュをクリアしてやる必要がありますが、favicon（ファビコン）に少しはまる（IE7で表示されなかった訳）を参考にさせてもらったところ、IE7の場合は履歴の削除＆IE再起動も必要みたいです。

また、オンラインツールとして、イメージファイルをアップロードしたらfaviconを作ってくれるというサイトもあるようです。

まだ、試してませんが、いちいちペイントツール立ち上げて、、と考えると便利ですね。

参考：

上記で説明してる作り方から、Movable Typeでのカテゴリ毎のfavicon指定方法も書かれています。

3流プログラマのメモ書き