ファビコン

ファビコン(Favicon)を作成してWeb ページに設定する方法を説明します。

ファビコンとは

ファビコンとは、Web ページを表示したときに、アドレスやタブの部分に表示される小さなアイコン(画像)です。

Faviconという単語は、Favorite iconを短縮した造語で、お気に入りのアイコンという意味です。ファビコンを表示することで、そのWebサイトをユーザに印象づけ、Webサイトの選択操作がしやすくなります。ファビコンは、アドレス・タブ・ブックマークの一覧などにWeb ページのタイトル名やURL と共に表示されますが、表示される場所はWebブラウザによって異なります。

ファビコン画像のファイル形式

ファビコンのファイル形式は、特に決まりはなくWebブラウザが表示できるものであればどれでも用いる事ができます。但し、IE8以前はICO形式しか認識しません。画素数(サイズ)は16×16、32×32、48×48、64×64 を使用できます。色数は4 ビットカラー(16 色)、8 ビットカラー(256 色)、24 ビットカラー(1677 万色)、32 ビットカラー(42 億9000 万色)を使用できます。各Webブラウザで使用できるファビコンのファイル形式を、次の表に示します(表の数字は対応しているWebブラウザのバージョンの最小値です)。

各Webブラウザで使用できるFaviconのファイル形式
WebブラウザICOPNGGIFAnimation GIFJPEGAPNGSVG
Chrome1.04.04.04.04.0--
Safari1.03.14.0-4.0--
FireFox1.02.01.01.01.03.04.0
IE5.01111----
Opera7.010.17.07.07.09.5-

ここで、ICO形式はマルチアイコンファイルであり、複数の画素数・色数の画像を1つのファイルに保存することができます。GIFは8 ビットカラー(256 色)までに対応しています。SVGファイルはベクトルデータであり、どのような画素数で表示することもできます。

ファビコンのファイル名も、特に決まりがありませんが、WebサーバのWebサイトのルートにファビコンを配置する場合は、"favicon.ico"でなければなりません。

ファビコンの作成法

ファビコンファイルを作る方法として、つぎのような方法があります。

ファビコンを作るWeb サイトを利用する
ファビコンを作る画像処理ソフトを用いる

上記のファビコンを作るWebサイトでは、はじめからエディタでファビコンを作ることができるほか、他のファイル形式の画像をICO形式のファイルに変換することもできます。

ファビコンの設置法

HTMLファイルに記述する方法

ファビコンファイル"myfavicon01.png" をHTML文書で指定するには、head要素内に次のlink要素を入れます。

<link rel="icon" href="myfavicon01.png" size="16x16" type="image/png">

rel属性には"icon"を指定します。href属性の値には、ファビコン・ファイルへのパスを記述します。http:で始まる絶対URL、もしくは相対パスを指定することができます。size属性にはファビコンのサイズを"横幅x高さ"とういう書式で指定します。ICO形式のファビコンで複数のサイズの画像を含んでいる場合は、次のようにサイズを半角スペースで区切って記述します。

<link rel="icon" href="myfavicon01.png" size="16x16 32x32" type="image/png">

type属性にはファビコンファイルのMIMEタイプを指定します。次の表に、ファビコンに使用される主なファイル形式のMIMEタイプを示します。

ファビコンファイルのMIMEタイプ
ファイル形式MIMEタイプ
ICOimage/vnd.microsoft.icon, image/x-icon
PNGimage/png
GIFimage/gif
Animation GIFimage/gif
JPEGimage/jpeg
APNGvideo/png
SVGimage/svg+xml

IANAに登録されたICO形式のファイルのMIMEタイプは、"image/vnd.microsoft.icon"ですが、IEはこれを認識しません。IEに認識させるには、MIMEタイプを、"image/x-icon"とします。

また、size属性とtype属性は省略することができます。

favicon.icoをWebサイトのルートに配置する方法

Webサイトのルートに、favicon.icoという名前のファイルを配置します。すると、そのWebサイトの全てのWebページに対してファビコンが適用されます。但し、Webサイトのルートに配置するには、Webサイトの管理者権限が必要となります。

WebサーバがApacheの場合

WebサーバソフトがApacheである場合に、ApacheのRewrite機能、ErrorDocumentディレクティブを使う方法があります。

Rewite機能を用いる方法

Rewite機能を使ってファビコンを設置すると、指定したディレクトリ内のHTML文書のファビコンを同一にすることができます。Rewrite機能は、アクセスのあったURLを正規表現を用いて書き換えてから処理する機能です。Rewrite機能により、ドメイン名の変更、リダイレクト、CGIなどによる動的ページを静的ページに見せかけるなど、さまざまな処理を行うことができます。

ファビコンを設定する場合の方法は次の通りです。例えば、ファビコンファイルのパスを"/icons/myfavicon01.png"とします。このとき、

  • Apacheのサーバ設定ファイルhttpd.confのそのアイコンを使用したいスコープ
  • ユーザのWebサイト公開用のディレクトリの.htaccess

のどちらかに、次を追加します。

RewriteEngine On
RewriteCond %{REQUEST_URI} "favicon.ico$"
RewriteRule "(.*)favicon.ico$" "/icons/myfavicon01.png" [N,PT]
ErrorDocumentを用いる方法

HTTPリクエストの中に、favicon.icoに対するリクエストがあり、HTTPステータスが404(ファイル未検出)の場合に、指定したディレクトリにあるfavico.icoを返すように設定します。

具体的には、次のようにします。例えば、サーバルートのサブディレクトリ/icons/にデフォルトのfavicon.icoを配置し、

  • Apacheのサーバ設定ファイルhttpd.confのそのアイコンを使用したいスコープ
  • ユーザのWebサイト公開用のディレクトリの.htaccess

のどちらかに、次を追加します。

AddType image/xicon .ico
<Files favicon.ico>
ErrorDocument 404 /icons/favicon.ico
<Files>

ページ先頭へ