top > コラム > ホームページ制作 > ファビコンを作って設置しよう

ファビコンを作って設置しよう

ホームページを制作する際に忘れがちなのが、「エラーページの作成」と「ファビコンの作成」です。どちららも絶対に必須というわけではないのですが、あったほうがよいものです。

エラーページの作り方については別のコラムで紹介しておりますのでそちらをご参考ください。

1.ファビコンとは?

そもそもファビコンって何?と思われた方もいらっしゃると思います。ファビコンとは、例えば、IE9のブラウザではアドレスバーの左側に表示されるアイコンのことです。

2.ファビコン画像の作り方

ファビコンは16×16pxの正方形の画像です。画像の種類(拡張子)は「.ico」という特別な種類になります。その他、.gif形式や.png形式の画像もファビコンとして利用できますが、古いブラウザは対応していない場合もありますので注意です。対応しているブラウザが限られますが、アニメーションgifや透過pngも利用できます。

画像編集ソフトをお持ちであれば、ご自由に画像を作成してください。16×16pxの正方形の画像なので編集が難しいのであれば、32px四方や64px四方の画像を作成した後、16×16pxの正方形に縮小するのも手です。どんな画像にするか迷ったら、サイトのロゴ画像の一部をファビコン画像にしてみましょう。統一感が出るのでよいです。

3.拡張子を.icoにする

普通の画像編集ソフトでは、拡張子を.icoにして保存することができません。

Photoshopをお持ちであれば、「ICO (Windows Icon) Format 」というプラグインをインストールすることで.ico形式の画像を作成することができます。

上記のプラグインをダウンロードしたら、Photoshopのフォーマットフォルダに入れてからPhotoshopを起動してみましょう。Windows7でPhotoshopCS5が入っている私の環境では以下の場所にフォーマットフォルダがあります。64bit版のPhotoshopを使用しているので、プラグインも64bit版をインストールしています。

C:\Program Files\Adobe\Adobe Photoshop CS5 (64 Bit)\Plug-ins\File Formats

Photoshop以外の画像編集ソフトでファビコン画像を作られた場合は、.gif形式などで保存して、以下の拡張子置換サービスを利用しましょう。

また、ファビコンの無料素材を配布しているサイトもたくさんありますので、Yahoo!やGoogleで検索してみてください。

4.ファビコン画像を設定する

ホームページにアクセスした際にアドレスバーにファビコン画像が表示されるように、HTMLで設定します。

ホームページの全てのHTMLファイルのheadタグ内に以下のように記述します。

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

.gif形式の画像を使用した場合は、

<link rel="icon" type="image/gif" href="favicon.gif">

.png形式の画像を使用した場合は、

<link rel="icon" type="image/png" href="favicon.png">

というように、きちんとtype属性を付加しておいたほうがよいでしょう。

href=”~”にファビコン画像がある場所を指定します。

特にIEの場合、ファビコン画像がちゃんと表示されない場合があります。その際はIEのファイルのキャッシュを削除するなどしてみてください。

余談になりますが、rel属性が「rel=”shortcut icon”」と「rel=”icon”」と二種類ありますが、元々このファビコン(.ico)はIE(Microsoft)によって提唱されたもので、その際のrel属性が「rel=”shortcut icon”」だったわけですが、他のブラウザも対応する過程で、rel属性が「rel=”icon”」で、.gifや.png形式の画像も使えるように実装したので、このように二種類の記述方法が生まれたわけです。IEは.ico形式のファビコンにしか対応していないですが、他のブラウザは.gifや.png形式のファビコンに対応しているので、

<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/png" href="favicon.png">

と記述することで、IEは.ico形式のファビコン、他のブラウザは.png形式のファビコンを表示されることも可能です。(.icoも.pngも対応しているブラウザの場合、最後に記述したほうが適用されます。)

ホームページ制作カテゴリの最新記事

目次

※当サイトではWebサイトのことを、一般的な通称の「サイト」、「ホームページ」、「HP」などと表記しておりますが全て同一のことです。


« トップページへ戻る
↑ ページのトップへ戻る