(cache) favicon.icoの解説と注意

favicon.icoの解説と注意

例えばアマゾンや楽天を「お気に入りに追加」すると、ブラウザ上ではこんな風に表示される。

URL表示部分

お気に入り表示部分

このちょっとした絵（アイコン）をfavicon.ico（ファビコン）という。googleで検索すればいろいろ出てくるのだが、内容的に古かったり不足だったりで断片的な情報が多い。そこで、いまさらではあるがここでもある程度の解説をまとめてみたい。まずはいくつか箇条書きしてみよう。

基本的なこと

Favorite Icon（お気に入りアイコン）の略である（そのまんま）
マイクロソフトの公式な解説ページにあるとおり、アイコンファイルを作ってHTMLファイル等と同様にWebサーバ上の所定の位置に置くだけで実現可能。アイコンの作成にはアイコンエディタを使えばよい。フリーソフトもいろいろある。筆者のお勧めはKH IconStudio。
favicon.icoはHTTPやHTMLの標準規格には無い。というのは、マイクロソフトのInternet Explorer独自の拡張機能として搭載されたのが最初だからだ。
ということはfavicon.icoはInternet Explorerでしか見えないはずなのだが、時間がたつにつれ他のブラウザもIEを真似て対応するようになり、現在ではMacintoshのSafariやOperaなどのブラウザでも同様の機能がある。

基本的なことはこれくらいだが、さらに付属的な情報も付け加えておこう。

ブラウザの動作とWebデザイナーが気がつくきっかけ

ユーザーが「お気に入りに入れる」という動作をとったときにはじめてIEブラウザがfavicon.icoをWebサーバから取得にかかる。そのときfavicon.icoが存在しないと、「そんなファイル無いよ」というエラー(404エラー)が発生したことがWebサーバのアクセスログに記録される。（ブラウザ側ではデフォルトの青い「ｅ」マークが使われるだけ） Webマスターがアクセスログの解析をする過程で「favicon.icoが404エラー？俺はそんなコンテンツつくってないぞ？」と気づくことでfavicon.icoとは何ぞやという問題にたどりつくケースが多いようだ。

アクセスログ解析上の利点と落とし穴

裏を返せば、favicon.icoへのアクセス数（あるいはエラー数）はそのまま「お気に入りに入れようとしたユーザーの数」と解釈できる。そのため、日々のアクセス数（ページビュー）と同様にサイトの人気度を計る指標としているWebマスターもいるようだ。ただし落とし穴がある。例えばMacintoshのSafariブラウザやOperaなどは、ユーザーが今見ているページをお気に入りに入れようとしなくても勝手にfavicon.icoにアクセスしてしまうことがあるのだ。したがって、どのブラウザからのfavicon.icoへのアクセスなのかを正確に把握した上で統計を取らないと、「今日は100人がお気に入りに入れてくれた」と喜んでいても、実際にお気に入りに入れたユーザーは20人に満たないなんてことがありうる。

不具合

「お気に入りに追加」をしてもアイコンが現れないんだけどなんで？という方もいると思う。Internet Explorerの何らかの不具合と思われるが、原因は不明だ。ツール − インターネットオプションの「インターネット一時ファイルの削除」をやると直るという話もあるが、定かではない。（情報ある方はコメントお願いします）

効果、効能

favicon.icoは単なるちょっとした飾りではあるが効果が無いことも無い。「お気に入り」のリストはもう何十個ものURLでいっぱいになっている人も多いだろう。そんな行列のなかにあって独自のアイコンを表示していればある程度は目立つことができる。少なくともデフォルトの青い「ｅ」マークのままよりはましだろう。

隠れた機能

ただし、さして重要でない飾りと思っててきとうに作ると思わぬ落とし穴が待っている。実はfavicon.icoの表示のされ方は上であげた以外にもうひとつあるのだ。アマゾン、楽天のそれぞれで、ブラウザのURLバーに表示されたアイコンを、マウスでつかんでそのままデスクトップ上にドラッグ＆ドロップしてみてほしい。次のような結果になるはずだ。

実はOSとしてのWindowsではアイコンの大きさが何種類かある。上のようにデスクトップ上でのアイコンとして使用されるのは32x32ピクセルのアイコン。ブラウザ上で使用されるのは16x16ピクセルのアイコン。楽天のfavicon.icoファイルには16x16のアイコン情報しかないが、アマゾンのfavicon.icoファイルには16x16と32x32の両方が格納されているのだ。だからアマゾンはURLをショートカットとしてデスクトップに表示してもアイコンが見栄えよく表示される。

2004年2月24日 Comments [2] | Trackbacks [13]

コメントする

(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)

今ですね、naoFavicon4IE というソフトを開発中です。

提供する機能はこんな感じです。
　・IEのお気に入りを調査して、お気に入りアイコンをダウンロード
　・サイトのHTMLを調査して、お気に入りアイコンをダウンロード
　・サイトの調査結果を、お気に入りに保存
　・既定のお気に入りフォルダ以外も指定可能
　・ダウンロードしたアイコンを指定フォルダに保存
http://nao4u.com/

Posted by 2nd@nao4u at 2004年7月15日

こちらの記事をリンクさせていただいています。
ありがとうございます。

Posted by yumamiti at 2006年7月11日

Web屋のネタ帳