favicon作っちゃった

ちょっと調べ物をしていたら、favicon（ファビコン）というものの存在を知りました。

あ、存在は知っていたけれど、名前を知らなかったという方が適切かな？

faviconとはこういう画像です。

一番上は、ブラウザ（IE8－Internet Explorer8－）のアドレス欄、その下はタブ、その下はブックマークした場合（「お気に入り」に入れた場合）ですが、小さなアイコンが表示されています。

また、HPのショートカットをデスクトップなどに作った場合も、オリジナルのショートカットアイコンが作られます。（IE8なら、「ファイル」→「送信」→「ショートカットをデスクトップへ」）

こういうアイコンをfavourite icon 、略してFaviconと呼ぶそうです。

faviconを表示させるのは簡単で、htmlファイルのあるルートディレクトリにfavicon.icoの名前で置いておくだけ。faviconに対応しているブラウザなら自動的に表示されます。

faviconは、画像を送ると自動生成してくれるサイトがあって、

　←こういうgifアニメもついでに作ってくれました。（サイトについては後述）

上の枠の中の画像の内、一番下はFirefoxというブラウザで表示したものですが、Firefoxではfaviconが表示されません。Firefoxはfaviconに対応してくれていないのかな？

追記：

その後、Firefoxは一度保持した画像をキャッシュに持っていて、faviconを追加しても置き換わらないということが分かりました。

Firefoxのキャッシュをクリアしてもダメだったのですが、Favicon Picker 3というアドオンを追加したら、それだけで新しく作ったfaviconが認識されました。

元々はfaviconをクリアするものみたいですが、アドオンする前に大師小学校同窓会サイトのタブは閉じておき、（アドオンを実行したかどうかは不明ですが、）新たに同窓会サイトを開いたら画像が表示されていました。

と言うわけで、試行錯誤している内に表示されるようになったので、この手順で正しいのかどうかは分かりませんが、覚書として書いておきます。

■faviconの作り方

faviconを自動生成してくれるサイトは色々ありますが、ブログ主が使ったのは、“FavIcon from Pics”というサイト（※）です。

使い方は簡単で、元画像をupして、［Generate FavIcon.ico］ボタンを押すだけ。

gifアニメに関してはカスタマイズ（アニメ効果の調整など）も出来るようです。

※何度かfaviconを作り直したりしている内に、上記サイトの画面が白くなる現象が起きましたが、右上の「Start Over」をクリックするとリセットされました。（下の画像参照）

【追記】

ココログにfaviconを設置する方法は下記のスレッドを参照して下さい。

『ファビコン設置とIEにも表示される方法』
http://cocolog.kaiketsu.nifty.com/tips/80100/thread