ファビコン(favicon)を作ってみよう！

2009年3月2日(月)

ファビコンとは何か？？ファミコンじゃないですよ（＾＾；

Favicon（ファビコン）はウェブサイトやウェブページに関連付けられた

アイコンのことである。（Wikipediaより引用）

もっとわかり易く説明すると、ホームページやブログを開いたときやブックマークした時、

ページタイトルの前に表示されているアイコンです。

ファビコンを設置すると、”お気に入り”の中で見つけやすくなったり

どんなサイトなのかわかりやすくなるなどのメリットがあります。

yahoo!のファビコンはこんな感じ

yahoo
赤丸部分がファビコンといわれる画像が表示されています

このファビコンはオリジナルで作る事が可能です

当ブログにもファビコンを設置してあります

wanwancamp
愛犬”ゆう”です（＾＾；

ではこのファビコンをどうやって設置するか説明します。

１．ファビコン用のアイコンを作成します
　　16×16ドットのicoファイルを作ります・・・・

２．一からこつこつと作成するのは面倒なので
　　私の場合はデジカメで撮影した”ゆう”の画像で”ゆう”の部分だけ切り抜いて
　　icoファイルに自動変換してくれるサイトで変換しました
　　http://ao-system.net/favicon/index.php
　　このサイトで小画像(16×16)を作成します

３．作成したiconファイルをサーバーにUPします
　　ファイル名をfavicon.icoにしてUPします。
　　UPする階層は通常はTOPページと同じところにします。

４．ファビコンのパスを設定する
　　＜link rel=”shortcut icon” href=”ファビコンまでのパス/favicon.ico” /＞
　　このような記述をタグの中に設置します
　　このブログの場合はこんな感じです
　　＜link rel=”shortcut icon” href=”http://blog.wanwancamp.jp/favicon.ico” /＞

これで設置完了です。

もし、ちゃんと設置してもファビコンが表示されない場合はブラウザにキャッシュ

されているものが影響している可能性があるので、キャッシュと履歴をクリアして

ブラウザを再起動させると表示されます。

※この例ではTOPページにファビコンを表示する簡単な設定です。

　各ページに設定する方法やページ毎に異なるファビコンを設定する場合は、

　詳しく解説されているサイトが沢山あるのでそちらをご覧ください・・・手抜き