favicon.icoを作ってサイトトップのフォルダに入れておくとお気に入りやアドレスバーなどに専用のアイコンが表示されるようになります。

サンプルイメージ

1.画像ソフトでpng画像を作成。

表示させたい画像を作成してpng形式で保存します。

当サイトではFireworksを使って作りましたが、フリーソフトでも問題ありません。

フリーで有名な画像作成ソフトには「Pixia」や「PictBear」、「GIMP」などがあります。

サイズは32x32で作ります。

• Pixia (http://www.pixia.jp/)
• PictBear (http://www.fenrir.co.jp/)
• GIMP (http://www.gimp.org/)

2.作成したpng画像を変換

favicon.icoとしてブラウザに認識してもらうためにpng画像を変換します。フリーソフトでも変換できるものもあるようですが、今回は簡単にフリーで変換してくれるサイトを利用します。

• FavIcon from Pics (http://www.chami.com/html-kit/services/favicon/)

サイト内の「Source Image」で作成したPNGファイルを選択して、「Generate Favicon.ico」を押すと作成完了のページに移動します。

「Download FavIcon Package」をクリックしてファイルを保存します。

保存されたファイルを解凍すると「favicon.ico」「animated_favicon1.gif」「ReadMe.txt」という3つのファイル出てきます。

favicon.icoをサイトにアップロード

サイトのルートフォルダ(トップページのフォルダ)へfavicon.icoをアップロードします。

そしてfavicon.icoを表示させたいページのhead部分に以下の一行を書きます。
※hrefは表示させたいページからのfavicon.icoの位置になります。

<link rel="shortcut icon" href="favicon.ico" 
type="image/vnd.microsoft.icon" />

これでfavicon.icoが表示されるようになりました。

animated_favicon1.gifについて

アニメーションさせたfaviconを表示させたい場合は「animated_favicon1.gif」をサイトのルートフォルダへ保存して以下を表示させたいページのhead内に書きます。

<link rel="icon" href="animated_favicon1.gif" type="image/gif" />