お気に入りアイコンを指定する

HTMLを使用した記述方法

記述方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="SHORTCUT ICON" href="smp.ico">
<title></title>
</head>
<body>

</body>
</html>

解説

 表示サンプルは当ページとなっています。お気に入りアイコンとは「IE」等ブラウザの「お気に入り」リストにおいて表示されるショートカットアイコンのことです。「IE」のデフォルトでは「IEアイコン」が表示されていますよね。今回はこちらを任意のアイコンに変えてみよう、ということになっています。ただし、この機能を利用できるのは、「Internet Explorer 5.0 以降」「mozilla 0.9.6 以降」の種類のブラウザです(他未確認)。全ての環境にて対応しているわけではないので注意が必要です。

 さて、今回はまず下準備としましてアイコンファイルを作成してやる必要があります。アイコンファイルは「16×16」サイズのビットマップファイル(*.bmp)の拡張子を *.ico に変更するだけでよい、と思っている方おられませんか?今回の場合、この方法は使えません。通常アイコンファイル(*.ico)には「16×16」サイズのアイコンファイルの情報と、「32×32」サイズのアイコンファイルの情報の2つが登録されています。つまりこの2種類のサイズを用意しなければ、インターネットショートカットを作った際にアイコンが表示されなかったり、お気に入りに登録した際のアイコンがデフォルトのままになったりと、意図しない結果を招きます。適切なアイコンエディタを使用し、2つのサイズに対応したアイコンを作成するようにしましょう。

お奨めはフリーのアイコン作成ソフト「@icon変換」です。

好みのデザインのアイコンが出来上がりましたら「favicon.ico」と名前をつけて保存し、WEBサーバにアップロードしましょう。アップロードする場所ですが、「favicon.ico」には次の約束事があります。

そのページが配置されているディレクトリ中に「favicon.ico」が存在しない場合、上位ディレクトリを検索し、WEBサーバのルートまで検索しにいくこととなる(参考文献)。

つまり、「favicon.ico」を保存した場所以下のディレクトリにあるWEBページ全てに、このアイコンが適用されることとなります。ただし、「ページごとにアイコンを変更したい」「プロバイダのWEBサーバを使用している」のような場合には上記の方法が使えません。

ここからやっと本題です。アイコンファイルを作り、「favicon.ico」と言う名前を付けて保存するところまでは同じです(名前はなんでも好きなものを付けてください)。そしてそのアイコンファイルを

<link rel="SHORTCUT ICON" href="smp.ico">

のようにヘッダ内にて指定してやることにより、指定したWEBページのお気に入りアイコンを変更することができます。また、「*.ico」ファイル以外の画像ファイルも次のように記述することにより、お気に入りアイコンとして使用できるようです。

<link rel="icon" type="image/png" href="smp.png">

ただし、お気に入りや、インターネットショートカットに登録した場合のアイコンはキャッシュ上で管理されているため、キャッシュをクリアするとデフォルトのアイコンにってしまうので注意が必要です。また、「アドレス(D)」横のアイコンを変更したい場合、お気に入りに登録後でなければ機能しません。しかも、ブラウザ及びOSのキャッシュに古い情報が一定期間保存されるため、アイコン情報が即座に反映されないケースもあるようです。

IE
Microsoft社のWebブラウザ。 InternetExplorerの略です。