タイトル画像
サイトタイトル画像

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

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

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

(1)favicon.ico とは何か

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

お気に入り

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

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

(2)利用の際の基礎知識

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

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

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

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

サイズ 用途 ブラウザ 種類 色数
16 * 16 アドレス横に表示する際に利用する mozilla ICOBMPPNG 256色
IE
32 * 32 インターネットショートカット(.url)で利用する IE ICOの場合他は16*16で可

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

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

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

(3)アイコンを作成してみよう

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

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

favicon作成サイト+

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

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

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」の部分は各自変更してください。

(4)有効利用

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

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

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

スポンサードリンク

オススメ書籍

HTML5、CSS3、JavaScript等の学習に役立つ書籍を紹介します。

人気コンテンツ

    Copyright ©2015 .(since 2005/02/10)