【 ファビコン（favicon）アイコンの作り方 】

ファビコンアイコンは、ブラウザのURLの左に表示される小さな画像のことです。またこのアイコンはタブやブックマーク、ブラウザによってはお気に入りのサイトのプロパティでも使用されるため、ブックマークアイコン、またはサイトアイコンと呼ばれることもあります。ここでは基本的にIEでのファビコンを念頭に説明していきます。

ファビコンは上に見るように、16x16ピクセルの小さな画像として表示されますが、プロパティでは32x32ピクセルで表示されます。

IEで使用するアイコンの画像は、複数の画像をひとつのファイルとして格納することができる、拡張子が“ico”という特殊なアイコンファイル（マルチアイコン）です。よって16ピクセルと32ピクセルの画像を両方もっている場合は、それぞれの大きさのものが使用され、ない場合は拡大または縮小されて補われます。

以上が概略です。以下、その作り方や注意などを記します。

最初にまず、アイコンとして使用する画像を用意します。

画像は16x16・32x32ピクセルの画像を用意することが望ましいですが、ひとつだけですますのであれば、もっとも人目につくことになる16x16ピクセルのものを用意します。32ピクセルのものを使って縮小して表示すると、どうしても見栄えが悪くなるからです。

しかしせっかくですので、ここでは2枚の画像でマルチアイコンを作ることについて説明していきます。

別々の大きさの画像を、それぞれ描くことは大変です。そこで大きな画像を最初に作り、それを画像ソフトで縮小して小さな画像を作るという段取りを踏みます。（とはいえ、ふたつの画像を作るわけですから、手間をかけて大きい方は複雑にし、小さい方は単純化するという手法で、まったく別の画像にすることも可能です。）

ここで注意することは、大きい方の画像を作るにあたって、32ピクセルで描いてしまいたくなりますが、30x30ピクセル以下の大きさで描きます。

理由は、あとで画像に薄く影を入れたいからです。16ピクセルのほうにも影をつけられればよいのですが、普通は大きさ的にそのゆとりがありません。そこで16ピクセルは影を諦め、32ピクセルのほうだけ影を入れます。そのために2ピクセル分取っておくわけです。（影が必要なければ、32ピクセルで描いてしまってかまいません。）

上のように30ピクセルの画像を16ピクセルに縮小します。このとき縮小しただけでは思ったような画像ができない場合は、直接修正を施し、小さくてもそれなりの感じが出るようにします。ここがもっとも難しいところでしょう。

できた画像をセーブするときに注意することがあります。背景にも色をつけている場合は問題ないのですが、上の例のように背景に色がない場合は、背景を透明にして保存する必要があります。ですのでファイル形式はPNG-24でセーブします。

次に32ピクセルの画像を完成させます。上で作った30ピクセルの画像の右と下を、2ピクセルずつ描画エリアを大きくします。そして画像の右下に影をつけます。影のサイズは2ピクセルです。

影の濃さは好みの問題ですが、黒よりは少し薄くした（透明度がかえられる場合は不透明度を下げる）方が見栄えがよいような気がします。影をつけたところで、これも背景を透過にして保存します。

ちなみに、上のように背景に色がある画像の場合も、背景自体に少し影を入れると立体感が出ます。

さていよいよ16ピクセルと32ピクセルの2つの画像を、ひとつのアイコンファイル（マルチアイコン）にします。

アイコンは特殊なファイル形式なため、アイコン画像が扱えるソフトが必要です。私は『@icon』という無料でダウンロードできるソフトを利用させていただいています。

このソフトを例にすれば、ソフトを起動してそこに上で制作した画像をドラッグしてきてドロップし、そして画像をすべて選択した上でマルチアイコンとして保存するだけです。ただ注意することは、必ず大きな画像が上になる（先に開く）ようにすることです。

一般的にはファイル名は「favicon.ico」もしくは「好きなファイル名.ico」で保存します。

次はファビコンを設置するにあたっての設定です。

しかしファイル名に好きな名前を付けた場合、またはファビコンをルートに置かない場合、表示するページごとに次の一行をヘッダーに記入しておく必要があります。

これの利点は、ページごとに自由にファビコンを変更できる点、そして好きな場所にファイルを置いておける点です。ドメインの下に複数のサイトをもっている場合、この方が管理しやすいかもしれません。

最後に、ブラウザで自サイトのファビコンを表示させるときの注意です。ファビコンを新しくしたとき、ブラウザによっては新しいファビコンが反映されないことがあります。

Firefoxの場合は、キャッシュをクリアし、新しくブックマークし直し、それをクリックしてサイトを表示すれば、新しいファビコンが反映されます。

またIE7の場合は、一時ファイル（キャッシュ）を削除して、ブックマークのファビコンが消えていれば、サイトを表示すると取得されます。また古いのが消えずに残っている場合は、一度サイトを表示させたのち、ブラウザ（もしくはWindows）を再起動すると新しいファビコンに換わっていると思います。

IE6の場合はキャッシュをクリアしたのちブックマークし直すと新しいファビコンが取得されるはずですが、うまくいかないこともあります。ファビコンは基本的にタブ式ブラウザのためにあるものと諦めましょう。

以上、一助となれば幸いです。