ブログを新しく制作したときに意外と忘れがちなのがこの、Favicon（ファビコン）です。昔はファミコンとか間違って呼んでいましたが、ブラウザのアドレスバー部分に表示されるちっこい画像のことです。

やはり驚くのが拡張子でしょうか。gifでもなければ、jegでもない。専用の.icoとなっています。こんな拡張子をどうやって作れば良いんだよ！と思ったりすると思います。今回はFavicon（ファビコン）の簡単な作り方を紹介。

１：画像制作ソフトを起動

まずは、Favicon（ファビコン）用の画像を、縦16、横16の32ビットで制作します。解像度などは特に気にすることはありません。ちなみに私は簡単に、PhotoShopで制作してみました。

２：gif形式で保存する

Favicon（ファビコン）用の画像は制作できましたでしょうか？画像制作ソフトが無い場合は、Favicon Japanと言うサイトでドットで描くことが出来ますのでどうぞ。

そして、制作した画像をgif形式でデスクトップなど分かりやすい場所に保存しましょう。自分のサイト用のフォルダを作っている場合は、そこに保存して頂いても問題ありません。

３：gifからicoに変換する

画像をgifからicoに変換します。拡張子をそのまま変更しても問題ありませんが、Favicon Japanにてファイルをアップロードするだけで変換して、プレビュー画面で確認できるのでオススメです。ちなみに今回私はこのサイトを使ってみました。ダウンロードボタンを押して、icoをダウンロードします。

４：アップロード

ダウンロードしたicoファイルをサーバーのトップディレクトリにアップロードします。FFFTPを使っているのであれば、そのままファイルをドラッグ＆ドロップしてサーバ側に投げ込めば問題ありません。

５：タグの指定

次に、Favicon（ファビコン）を表示させるためにヘッダー部分に下記の一行を追加します。

XHTMLの場合：<link href=”http://www.○○○○○○.com/favicon.ico” rel=”shortcut icon” />

HTMLの場合：<link href=”http://www.○○○○○○.com/favicon.ico” rel=”shortcut icon”>

これで、Favicon（ファビコン）が表示されたはずです。表示されない場合は、画像がアップロード出来ていない、画像のパスが間違っている可能性があります。XHTMLの場合は文法に従って記述してください。