ファビコンを表示するには、HTMLのhead要素内にlink要素を1行記述して、アイコンの所在を示すだけです。例えば、以下のように記述します。
＜link rel="shortcut icon" href="favicon.ico">
上記の記述では、「favicon.ico」というアイコンファイルをそのウェブページに対するファビコンだと指定しています。
FirefoxやOperaなどでは、GIF画像・PNG画像・JPEG画像・BMP画像を指定してもファビコンとして機能します。しかし、IEでは拡張子「.ico」のアイコンファイルでないと機能しません。
異なるディレクトリにある場合は、リンクを記述する際などと同様に、相対パスや絶対パスで存在場所を記述します。例えば、1つ上の階層にある「allabout.ico」を指定したいなら、次のように記述します。
＜link rel="shortcut icon" href="../allabout.ico">
※IEでは、ローカルにあるHTMLのファビコンは読まないようです。ローカルで表示を確認したい場合は、FirefoxやOperaなどを使いましょう。もしくは、ファイルを実際にサーバにアップロードして、ウェブ上で確認して下さい。
もっと楽な方法は？
上記の指定方法を使えば、ページ単位でファビコンを指定できます。しかし、すべてのページに同じ記述を加えるのは面倒ですね。
たいていはウェブサイト全体で共通のファビコンを1つ指定できれば十分でしょう。その場合には、もっと簡単に一括してファビコンを指定する方法が使えます。
ファビコンは、ウェブサイトの最上階層に favicon.ico というファイル名で置けば、そのサイト内のすべてのページに対して有効なファビコンになります。その場合、HTML内にファビコンの位置を記述する必要はありません。
ファビコンをサポートしているブラウザは、ウェブページにアクセスすると同時に、favicon.ico というファイルが存在するかどうかも一緒に確認します。見つかれば、その favicon.ico を、ファビコンとして表示します。
ですから、HTMLに一切記述を加えることなく、ただ favicon.ico というファイル名でアイコンファイルを置くだけでファビコンを表示可能です。
とても簡単ですね。
たいていのサイトは、この方法でファビコンを表示させています。All Aboutでもそうです。
ブログなら、カテゴリごとにファビコンを分けることも簡単
ブログなら、テンプレートHTMLに記述を加えることで簡単に全ページにlink要素を追加できます。その場合、ファビコンのファイル名にちょっと工夫をすることで、カテゴリ別にアイコンを用意することができます。
[1]. カテゴリ名に一致させたファビコン名にする
まず、ファイル名をカテゴリ名（またはカテゴリの出力名）と一致させたファビコン画像を作ります。例えば、以下のようにします。
| カテゴリ名 | カテゴリの出力名 | ファビコンのファイル名 | |
|---|---|---|---|
| ニュース | cat1 | → | cat1.ico |
| 日記 | cat2 | → | cat2.ico |
| WEB | web | → | web.ico |
これらのファイルを、ブログの最上階層にアップロードします。
[2]. ファビコン名を生成する記述を加える
次に、ブログのテンプレートに、「カテゴリ出力名.ico」というファイル名をファビコンにするよう記述します。例えば、Movable Typeなら以下のように記述します。
＜link rel="shortcut icon" href="<$MTBlogURL$><$MTCategoryBasename$>.ico">
「<$MTBlogURL$>」はブログのURLを示し、「<$MTCategoryBasename$>」はカテゴリの出力名を示しています。
このように記述しておけば、「(カテゴリ出力名).ico」というファイルがファビコンとして使われるようになります。例えば、カテゴリ名「日記」（出力名「cat2」）に属するエントリには、「cat2.ico」というファビコンが指定されます。これによって、カテゴリごとに異なるファビコンを表示させることができます。
上記はMovable Typeでの例ですが、他のブログツールでも同じような方法が使えます。（記述方法はブログツールによって異なります。）
Web上のアイコン変換サービスを使う
ウェブ上には、任意の画像ファイルをアイコンファイルに変換してくれるサービスがいくつかあります。その中の1つである「FavIcon from Pics」を使う方法を紹介します。
使用方法は簡単で、「Source Image」欄に画像ファイルを入力して、「Generate Favicon.ico」ボタンをクリックするだけです。すると、アイコンファイルの生成が行われ、下図のようにダウンロードできるようになります。
「Download Favicon」ボタンをクリックすると、生成されたファビコンがダウンロードできます。アイコンファイルは、ZIP形式で圧縮された状態になっているので、ダウンロード後、展開して下さい。展開できたら、favicon.icoファイルを望みのサーバにアップロードしましょう。
