faviconの作り方−ファビコンを設置してアクセスアップ

favicon（ファビコン）の設置と表示されない時の原因と対処法

Favicon（ファビコン）とは、ウェブサイトやウェブページに関連付けられたアイコンのことで、Favorite icon（フェイバリット・アイコン）という英語を略した造語です。

faviconを設置することにより、ウェブブラウザのURL欄に表示されたり、お気に入りのサイト名の左側に表示されるようになります。

　http://www.jweb-seo.com/

faviconにより、他サイトとの差別化を図ることが出来、インパクト効果を与え次回のクリック率を上げることができます。

faviconの作成

favicon用の画像を作る

faviconは16×16ピクセルの画像ですが、icoファイルに変換する前の、画像を作成する時点では、もう少し大きな画像でも大丈夫です。

画像編集ソフトをお持ちで無い方は、フリーソフトをダウンロードするか、faviconぐらいであれば、Windowsのペイントでも十分対応可能です。

スタート → すべてのプログラム → アクセサリ → ペイント

画像をfaviconに変換

jpgやgif、pngファイルのままでは、ブラウザがfaviconと認識できませんので、作成した画像をicoファイルに変換します。変換ソフトは沢山ありますが、フリーソフトの@icon変換や、Favicon Japanの生成ツールが便利です。

faviconを設置する

headタグ内にfaviconへのリンクを記述

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

当サイトの場合
<link rel="shortcut icon" href="../img/favicon.ico" />

注意点

icoファイルの設置ディレクトリや、icoファイル名により、ブラウザの種類によっては、正確に表示されない場合があります。その場合は、favicon.icoをトップディレクトリにアップロードして下さい。

Internet Explorer（IE）でfaviconが表示されない

ファビコンは、Firefoxなどの他のブラウザでは問題なく表示されるのに、Internet Explorer（IE6、IE7）では表示されないというケースが結構あります。

下記に、良くあるファビコンが表示されない原因と解決法を載せておきます。

ファイル指定のミス

絶対URL（http://ドメイン/img/favicon.ico）でファビコンが表示されるかを確認しましょう。

表示されない場合は、アップロードが不完全かアップしたファイルが不完全です。

原因の切り分けの為に、ソースを絶対URL指定に変えてみても良いでしょう。
<link rel="shortcut icon" href="http://ドメイン/img/favicon.ico" />

faviconファイルが不完全

favicon.icoがエクスプローラで表示されない状態でアップロードしても、IEではファビコンを表示することはできません。

favicon.icoが格納されているフォルダを開き、「表示 → アイコン」などで作成したファビコンが表示されない場合は、作成段階で問題が発生していますので作りなおしましょう。

IEのキャッシュの問題

意外と多いのがIEに保存されているキャッシュが原因でファビコンが表示されないというケースです。

ツール → インターネットオプション → 削除 → ファイル・履歴の削除

画面はIE7のものです。

一時ファイル削除後にIEを再起動してファビコンが表示されればOKです。