URLのとなりに表示されているアイコン favicon

ブラウザの「お気に入り」に登録したサイトのアイコンを変更する方法です。

これにより、「お気に入り」に登録された中でも、自分のサイトを目立たせることが可能となります。

（１）favicon.ico とは何か

Internet Explorer の『 favorite お気に入り』に登録した際に、アドレスを、任意なアイコンに変更できる機能があります。

このように『お気に入り』から利用した場合には、『アドレス(D):』の横のを変更したアイコンで表示されるようになります。

また、インターネットショートカット(.url)のアイコンも、この機能で変更できます。そして mozilla 0.9.6 からは、アドレス部分にアイコンを出すことも可能となりました。

まずは利用可能なブラウザについて下記に示します。

ブラウザ	バージョン
Internet Explorer	5.0 以降
mozilla	0.9.6 以降

１つのＩＣＯファイルで、16x16 と 32x32を埋め込んで作成されます。

それらについてまとめたのが次の表です。

ICO ファイルを作成する場合は、 BMP を ICO に変更しただけでは、うまく表示できないため、適切なアイコンエディタを利用してください。

色数は、256色にしてください。また、画像形式も各種対応されているものの、当初からのＩＣＯ形式が便利だと思います。

ショートカットアイコンである favicon.ico は、そのページが配置されているディレクトリ中に、favicon.ico が存在しない場合、上位ディレクトリを検索し、Ｗｅｂサーバのルートまで検索しにいくことになります。

まずは、アイコンを作成するためのソフトが必要です。GIMPやPhotoShopなどのペイントツール、IfanViewなどでも作成できます。

「favicon.icoを作ろう！」というサイト上でも作成できます。

このようなサイト・ソフトを利用して16 x 16の256色のアイコンを作成してください。

以下のようにＨＴＭＬ文を記述することで、利用が可能となります。

ICO 形式の場合

<html>
<head>
<title>トップページ</title>
<link rel="shortcut icon" href="/path/foo.ico">
</head>
<body>

....

</body>
</html>

各種画像形式

<html>
<head>
<title>トップページ</title>
<link rel="icon" type="image/png" href="/path/foo.png">
</head>
</head>
<body>

....

</body>
</html>

ただし、「/path/foo.ico」の部分は各自変更してください。

この機能によって、Web ページ管理者はログファイルを見ることによって、「いつ・どれだけ・お気に入りにしてもらったか」がわかるようになりました。

ページごとに異なったアイコンを設定しておけば、どのページをお気に入りにしたかもログを解析すれば知ることが出来ます。

ただしお気に入りや、インターネットショートカットに登録した場合のアイコンは、キャッシュ上で管理されているため、キャッシュをクリアすると、デフォルト IE アイコンに戻ります。
また、お気に入り登録から利用しないことには、この機能は働きません。