ファビコン
ファビコン（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ブラウザ | ICO | PNG | GIF | Animation GIF | JPEG | APNG | SVG |
|---|---|---|---|---|---|---|---|
| Chrome | 1.0 | 4.0 | 4.0 | 4.0 | 4.0 | - | - |
| Safari | 1.0 | 3.1 | 4.0 | - | 4.0 | - | - |
| FireFox | 1.0 | 2.0 | 1.0 | 1.0 | 1.0 | 3.0 | 4.0 |
| IE | 5.0 | 11 | 11 | - | - | - | - |
| Opera | 7.0 | 10.1 | 7.0 | 7.0 | 7.0 | 9.5 | - |
ここで、ICO形式はマルチアイコンファイルであり、複数の画素数・色数の画像を１つのファイルに保存することができます。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タイプ |
|---|---|
| ICO | image/vnd.microsoft.icon, image/x-icon |
| PNG | image/png |
| GIF | image/gif |
| Animation GIF | image/gif |
| JPEG | image/jpeg |
| APNG | video/png |
| SVG | image/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> |