ファビコン メーカー : favicon.icoを作ろう

Faviconメーカートップページへ戻る

FAVICONとは

favicon(ファビコン)とは、favorite icon(お気に入りアイコン)の略で、多くのブラウザで、お気に入り(ブックマーク)や、アドレスの横に表示されるアイコンのことである。

上のは、ブラウザの写真である。
たとえばこのように、アイコン が登録されて、見ることができる。
かっこいいし、分かりやすい!
お気に入りリストや、タブで目的のサイトを見つけやすくする効果がある。
ユーザビリティーの点からも優れているので、是非導入しよう!

やり方は簡単!

favicon.icoを作成して、自分のサイトへアップするだけ。
アップする場所は、index.htmlと同じ場所ね。
他にすることは無し!htmlへ記述の必要も無いよー。

ページによってアイコンを変えたい場合

デフォルトの名前はfavicon.icoだけど、別の名前に変えて指定することも可能。
なので、沢山のアイコンを使ってページごとに変えることも可能だ

<link rel="shortcut icon" href="ファビコンのパス">

上記ファビコンのパスの所に、名前を変えたファビコン名を入れよう。
これを <head>要素内に入れれば完成だ!

<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>faviconとは</title>
<link href="def.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="./image/favicon03.ico">
</head>


ファビコンが表示されない?そんな時は

ブラウザは、キャッシュというシステムを使って、以前アクセスした時に取得した内容を表示します。
ファビコンも例外ではなく、アクセスした時にファビコンが無かった場合、ファビコンが無いという情報が記録されます。
そして、ファビコンをアップロードしても、表示されないという現象が起きます。
では、その解決方法となるヒントです。(Internet Explorer向け)

最も軽症の場合、ブラウザを再起動させれば表示されるようになります。
これは、ファビコンをアップした後にブックマークした場合に限ります。

再起動で駄目な場合、いくつかの方法があります。
・キャッシュファイルを削除してから、ブックマークをしなおし、ブラウザを再起動する。
・ファビコンのファイル名を変えて、linkタグで明示的に指定することで、ファビコンのキャッシュを更新させる。

上記のどれかで普通は解決するので、試してみてね。
ただし、ファビコンの名前を変える方法は、なるべくはやらない方が無難です。(他サイトでは名前を変えるよう書いているのを良く見かけますが)
何故無難か、それは、デフォルトの動作が一番だからです。デフォルト以外にするとブラウザによってはもっとうまく動きません。

ファビコン対応ブラウザ状況

Internet Explorer > お気に入り登録時に読み込まれる。
その他 > ページを開いたときに読み込まれる。

こまかな動作は、ブラウザのバージョンによって異なる。