ページアイコン

これは何?

ページやサイトを表すアイコンです。「ショートカットアイコン」「ページアイコン」「サイトアイコン」「favicon」などと呼ばれます。

アドレスバーやブックマーク、タブなどに表示されます。

また環境によってはウインドウタイトルやタスクバーにも表示されます。

画像フォーマット

最近のブラウザでは、ブラウザ本体で表示できる(プラグインなしで表示できる)画像フォーマットが使えるようです。具体的には、Windowsのアイコン、JPEG、PNG、GIFといったところです。

もちろん、ブラウザによっては使えないフォーマットもあります。

画像の大きさは 16×16ピクセルになります。Windowsアイコンの場合は 32×32 のサイズも用意しておくといいかもしれません。

組み込み方

2通りあります。HTML文書に指定する方法と、アイコンを特定のフォーマット・ファイル名にして設置する方法です。

HTMLで指定

HTML文書に指定するには、link要素を使ってhead要素内に書きます。あまり前の方に書く必要もないので、</head> の直前あたりに置けばいいでしょう。

<link rel="SHORTCUT ICON" type="image/vnd.microsoft.ico" href="hoge.ico" />

あるいは次のように指定します。

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

最初のは Windowsアイコン専用の書き方です。IEはこの書き方のみで、2番目の書き方は受け付けません。JPEGやGIFなどを使う場合は2番目の書き方になります。(JPEGの場合はtype属性を"image/jpeg"、GIFの場合は"image/gif"にします。1番目2番目とも type属性はなくてもかまわないみたいですが。)

[2006.02.09.] .ico のメディアタイプを "image/x-icon" から正式な "image/vnd.microsoft.icon" に変更。

ちなみにこのサイトではXHTMLでの書き方を説明しています。HTMLの場合は次のような書き方になります。

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

つまり、末尾のスラッシュ( / )を取ってください。

特定のファイル名

HTML文書で指定しなくても、アイコンを表示させる方法もあります。Windowsのアイコンを作り favicon.ico というファイル名にして置いておけばOKです。ただし、このファイルの置き場所が問題です。

現状では多くのブラウザ(IE6、Firefox、Operaなど)がサーバのドキュメントルートのfavicon.icoしか読み込みません。たとえば、http://www.example.jp/~hoge/page1.html というHTML文書の場合、ブラウザは http://www.example.jp/~hoge/favicon.ico ではなく、http://www.example.jp/favicon.ico を読み込もうとします。(IE5ではHTML文書と同じディレクトリ[カレントディレクトリ]に favicon.ico があれば読み、なければ上の階層を探します)

独自ドメインやサブドメインでサイトを運営している人でなければ、サーバルートにファイルを置くことはできないので、HTML文書に指定する方法を選んだ方がいいでしょう。

ブラウザの対応度

		Win IE 5/6	Mac IE 5	Firefox 2	Opera	Safari
画像フォーマット	ICO	○	×	○	○	○
	PNG	×	×	○	○	○
	JPEG	×	×	○	○	○
	GIF	×	×	○	△1	△2
LINK要素のtype属性	SHORTCUT ICON	○	×	○	○	○
	icon	×	×	○	○	○
favicon.icoの場所(LINK要素で指定しない場合)	ルート	○	×	○	○	○
	カレント	△3	×	×	×	×
表示個所	アドレスバー	△4	×	○	○	○
	ブックマーク	○	×	○	○	○
	タブ	×	×	○	○	×

• △1 アニメーションGIFは表示されない
• △2 アニメーションGIFは静止表示
• △3 Win IE5は○、IE6は×
• △4 「お気に入り」に登録していなければ表示されない

		Lunascape 3.5	Sleipnir 2.3	Netscape 8.1	iCab 3.03	konqueror 3.5.5
画像フォーマット	ICO	○	○	○	○	○
	PNG	×	×	△6	○	○
	JPEG	×	×	△6	○	○
	GIF	×	×	△6	○	△7
LINK要素のtype属性	SHORTCUT ICON	○	×	○	○	○
	icon	×	×	△6	○	○
favicon.icoの場所(LINK要素で指定しない場合)	ルート	○	○	○	○	○
	カレント	○	×	×	×	×
表示個所	アドレスバー	○	○	○8	○	○
	ブックマーク	×	×9	×	×	○
	タブ	○	○	○8	○	○

• △6 レンダリングエンジンがGeckoのとき○、IEのとき×
• △7 アニメーションGIFは静止表示
• ○8 切り替えたレンダリングエンジン(IEまたはGecko)で有効なアイコンが表示される
• ×9 「ブックマークの管理」では表示される

サンプル

表示用のサンプルを用意しました。それぞれLINK要素で指定しています。

• PNG
• JPG
• GIF
• アニメーションGIF
• Windows icon

favicon.icoの作り方

favicon.icoの作り方

余談

歴史

アドレスバーやブックマークに表示されるアイコンは、1999年3月に公開された(日付はウィキペディアの記述による) Windows版MSIE 5.0 で初めてサポートされました。つづいて2001年11月公開の Mozilla 0.9.6が一般画像フォーマットでのアイコン表示をサポートし、2001年12月の Mozilla 0.9.7 で Windows Iconフォーマットもサポートしました。ほかのブラウザもこれに続いて現在に至っています。

IE と ほかのブラウザの違う点は、前述のブラウザの対応度を見てわかる通り、IE が対応しているのがWindowsのアイコンフォーマットだけで、しかも「お気に入り」に登録しない限り表示されないのに対し、ほかのブラウザでは一般的な画像フォーマットが使え、閲覧者が何もしなくても表示されるというところです。明らかに後発組の方が進んでいます。

組み込み方その2

さて、上記組み込み方ではLINK要素の書き方を2とおり紹介しました。ではこれを両方とも指定したらどうなる(何が表示される)でしょうか。

SHORTCUT ICON を先、 icon を後に指定した場合

Win IE : SHORTCUT ICON

Firefox : icon

Opera : icon

Safari : icon

Netscape8.1 (Geckoモード) : icon

Netscape8.1 (IEモード) : SHORTCUT ICON

iconを先、 SHORTCUT ICON を後に指定した場合

Win IE : SHORTCUT ICON

Firefox : SHORTCUT ICON

Opera : SHORTCUT ICON

Safari : SHORTCUT ICON

Netscape8.1 (Geckoモード) : SHORTCUT ICON

Netscape8.1 (IEモード) : SHORTCUT ICON

やはり、そのブラウザが理解できる書き方のうち、後で指定されたものが表示されました。

対応度・色数

次に色について見てみます。Windowsのiconファイルには、サイズや色数の違うものを何種類か入れておけます。Windows IEではシステムで使える色数のアイコンが表示されます。例えば、画面モードが24ビットカラーであってもWindows ME上のIEでは8ビットカラー(256色)のアイコンが表示されます。

一方、その他のブラウザでは画面モードの色数に関わらず24ビットカラーのアイコンが使われるようです(もちろん画面が256色モードなら24ビットカラーのアイコンが減色処理されて表示されます)。唯一例外なのがSafariで、4ビットカラー(16色)のアイコンが表示されます。

対応度・画像の大きさ

続いて大きさです。どのブラウザ上でも16×16ピクセルでしか表示されないのですが、これよりも大きなサイズのものを指定した場合、ちゃんと表示されるのでしょうか。

サイズが 48×48ピクセルのみの Windows Icon

Win IE : △ (アドレスバーは×)

Firefox : ○

Opera : ○

Safari : ○

100×100ピクセルの JPEG画像

Firefox : ○

Opera : ○

Safari : ○

もともとFirefoxでは画像単体を表示した場合、アドレスバーやタブにその画像を縮小してアイコン表示していますので問題ないのでしょう。ほかのブラウザでもWin IE以外では問題ないようです。

RSSとFavicon

サイトの更新情報の配信手段としてRSSがよく使われるようになってきました。RSSにはいくつか規格があるのですが、RSS1.0 では Imageモジュールを使うことでFaviconを指定できます。画像フォーマットは Windows Icon に限らず、一般的な画像データでいいようです。

ただ、これに対応したRSSリーダがあるのかどうかは確認できてません。

参考

参考

How to Add a Shortcut Icon to a Web Page

Windows XP 用アイコン作成法

favicon.icoの解説と注意/Web屋のネタ帳

ファビコンの設置方法/Favicon Japan!!

image/vnd.microsoft.icon