faviconの作り方

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

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

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

faviconの作成

favicon用の画像を作る

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

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

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

画像をfaviconに変換

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

@iconの使い方

@iconが英語になってしまっている場合には、「Option ⇒ Languages ⇒ 日本語」で日本語化できます。

ファイル　⇒　開く　⇒　ファイル選択

@iconを起動してファビコンにしたい画像を開きます。なお読み込む画像はgifやjpgではなく、bmpが良い様な気がします。読み込む段階で画像サイズが大きすぎるとファビコンにした時につぶれてしまいますので、事前に実際のファビコンサイズに近い大きさで画像を作っておくのが良いと思います。

あとは、挿入したアイコン名をクリックして、ファイル ⇒ 単独アイコンとして保存すればOKです。ファイル名はfavicon.icoで良いと思います。

faviconを設置する

作成したfavicon.icoをサーバにアップします。

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

注意点

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

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

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

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

ファイル指定のミス

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

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

原因の切り分けの為に、ソースを絶対URL指定に変えてみても良いでしょう。

faviconファイルが不完全

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

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

IEのキャッシュの問題

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

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

キャッシュのクリア

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

»WPサイト向けのサーバー

»エックスサーバーの使い方

トラックバック&コメント

この投稿のトラックバックURL:

コメントをどうぞ

※スパムと判断したコメントは削除しています。