初心者向けホームページ作成講座
フリーソフトでホームページを作ろう!
touka.gif(49 byte)
touka.gif(49 byte)
touka.gif(49 byte)
touka.gif(49 byte)
touka.gif(49 byte)
t-1.png(323 byte)

faviconの作成

(更新日 08/11/22)

 faviconって言葉を聞いたのは初めてという方も多いと思います。faviconとはホームページを開いた時のアドレス欄や、お気に入りに入れた時に表示される小さなアイコンの事です。ブラウザの種類や設定によっては、faviconが表示されなかったりするので全く見ない人もいるかもしれません。このページではあってもなくてもいいけど、あった方がいいfaviconの作り方と設置を説明します。

favicon素材を作成

favicon-1.png(5437 byte)

 上でも書いたようにfaviconはお気に入りの一覧などに表示されるアイコンで、お気に入りが大量にあると、各ホームページが判別しやすくなります。favicon自体がないホームページの場合はそのウェブブラウザが用意しているアイコンが表示されるので特に用意しておく必要はないのですが、faviconを設置しておくとお気に入りから来てくれる来訪者が増えるかもしれません(^^)

 さて、faviconは32px×32px、16px×16pxの2つの画像が1つになっているICO形式の画像ファイルです。つまり1つのfaviconを作るには2つのサイズの画像が必要となります。そこでまずは32×32と16×16の画像を作成していきます。作成はWinペイントで作っても構いませんが、バナーを作成しよう!で紹介したGIMPなどの方が綺麗に作れます。

 保存する画像形式は、後からICO形式にするのでBMP形式にしておくと扱いやすくなります。2つ作るのは面倒という方は大きい方を1つ作っておくだけで、後から紹介するFavIcon from Picsでfaviconを作成できます。この場合、画像形式はPNGやGIFでも可能です。

favicon-2.bmp(822 byte) favicon-3.bmp(3126 byte) ←こんな感じで大きい方と小さい方を2つ作っておきます。

@icon変換でfaviconを作成

favicon-4.png(6924 byte)

 2つの画像を1つのfaviconにするには、@icon変換というフリーソフトで可能です。@icon変換を起動して作成しておいた画像を入力します。小さい方が上、大きい方が下。次に読み込んだ2つの画像をまとめてドラッグします。2つともドラッグ出来たらツールバーにある「マルチアイコンに保存」をクリック。保存先を選択後、名前に「favicon」と付けて保存すればfaviconの出来上がり。

 作成したfaviconは、HTMLファイルと同じ場所か、画像ファイルを入れてあるフォルダの中に保管しておいて下さい。

FavIcon from Picsでfaviconを作成

favicon-6.png(13054 byte)

 FavIcon from Picsはオンライン上でfaviconを作れるツールを公開しているホームページです。ここは1つの画像を用意しておくだけでfaviconを自動で作ってくれます。「参照」からファイルを選択し、「Generate FavIcon.ico」をクリック。ページが切り替わったら「Download favicon」ボタンをクリックしてダウンロードします。

 ダウンロードしたZIPファイルを解凍したら、その中にfavicon.icoが入っています。他に入っているファイルは必要ありません。これでfaviconは作成終了です。

faviconを表示させる方法

 作成したfaviconをHTMLファイルと同じフォルダに入れておきます。後は各ページのHTMLファイルの<head></head>の中に以下のタグを記述しておけばfaviconが反映されます。HTMLファイルよりも下の階層に入れた場合は「img/favicon.ico」のように、そのフォルダ名も付け加えておきます。

<link rel="shortcut icon"href="favicon.ico">

 タグを挿入後、HTMLファイルとfaviconファイルをアップロードして下さい。自分でアクセスして表示されれば成功です。但し一部のサーバーによっては表示されない事もある他、ブラウザの種類や設定、古いキャッシュによって表示されない事もあります。

広告
t-2.png(196 byte)