この記事は “Yet Another Internet Explorer Advent Calendar 2013” の 10 日目です。
現在よく利用されていどのブラウザーでも、「お気に入りアイコン」あるいは “Favicon” と呼ばれる機能がサポートされています。Web サイトを表示した際、ページを表示しているタブやアドレスバーにそのサイト独自のアイコンが表示される動作はおなじみのものでしょうが、これが「お気に入りアイコン」です。また Web ページをブックマーク (Internet Explorer では「お気に入り」) に登録すると、ブックマークの一覧にも同じアイコンが表示されるでしょう。
この機能は元々 Microsoft が Internet Explorer 5 に搭載した独自機能で、それが他のブラウザーにも広まり、HTML5 で標準化されています。
Internet Explorer での Favicon の動作原理は以下のようなものです。
- あるドメインのサイトを初めて (訪問履歴の無い状態で) 訪問すると、ドメインのルート ディレクトリに対して favicon.ico の GET リクエストを発行します。このリクエストに対して正しいico 形式のファイルが返されれば、ドメインの全てのページで (ページごとに別の指定がない限り) そのファイルに含まれるアイコンが Favicon として利用されます
- Internet Explorer で利用可能な Favicon のデータは、ico ファイル形式です
※ サーバーからファイルが送信されても、そのファイルが正しい ico 形式でなければ Favicon は表示されません。代わりに Internet Explorer の既定のアイコンが表示されます - Web ページ単位で、link 要素を利用して表示される Favicon を指定することができます。Internet Explorer では、以下の形式で指定します
<link rel="shortcut icon" href="/favicon.ico" />
※ href 属性に ico ファイルの URL を指定します
※ link 要素は head 要素内に記述します - 複数のページでお気に入りアイコンが共有されている場合は、最初にダウンロードした ico ファイルが再利用されます。ページを訪問するごとに再ダウンロードされる事はありません
- Internet Explroer 6 以前は「お気に入り」に登録した場合だけ Favicon が表示されましたが、Internet Explore 7 以降は常に表示されます
- ダウンロードされた ico ファイルはインターネット一時ファイルに保存され、通常のキャッシュと同様の原理で管理されます。そのためキャッシュが削除されると、ico ファイルが再度リクエストされ、再ダウンロードされます。またページと ico ファイルの関連付けが閲覧の履歴データベース (history) に記録されます。そのため閲覧の履歴を削除した場合も ico ファイルが再ダウンロードされる場合があります
- Internet Explore 7 以降では、ページをお気に入りに登録すると、アイコンのデータは「お気に入り」フォルダーに作成される .url ショートカット ファイルの NTFS 代替ストリームに保存されます。このためお気に入りから削除しない限り、キャッシュを削除しても Favicon は再ダウンロードされません
※ Internet Explorer 6 以前、および「お気に入り」フォルダーの存在するドライブが FAT 形式の場合は、代替ストリームではなくインターネット一時ファイルが利用されます
Favicon についていくつかの Tips を紹介します。
Favicon に含むべきアイコン サイズ
Internet Explorer では、アドレスバーやタブ、お気に入りでの表示に 16 x 16 ピクセルのアイコンを利用します。そのためこのサイズのアイコンは ico ファイルに必ず含めるようにするべきです。その他にも以下のようなサイズのアイコンが利用される場合があります。
- [新しいタブ] ページ (32 x 32)
- タスク バー ボタン (32 x 32)
- ピン留めされたサイトのブラウザーの UI (24 x 24)
- スタート画面にピン留めしたサイトのタイル (32 x 32)
Favicon の変更を確実にユーザーに反映する
ドメインのルートに置かれた Favicon の変更 (別のアイコンへの変更) を直ちにすべてのユーザーに確実に反映させる方法はありません。各ユーザーの環境でキャッシュ期限が切れるのを待つ必要があります。
link 要素を利用して Favicon を指定している場合は、ico ファイルのファイル名を変更します。link 要素の href 属性で指定されているファイル名と、既にキャッシュされているそのページの Favicon のファイル名が異なる場合、Internet Explorer は Favicon が変更されたと判断し、再ダウンロードして新しいアイコンを反映します。
正しい Favicon が表示されない
サイトの開発者が自分のサイトの Favicon が正しく表示されない事を発見した場合、まず確認すべきなのは指定しているファイルが正しい ico 形式になっているかどうかです。また link 要素で指定している場所に正しく配置されているかも確認する必要があります。
ユーザーが自分の PC で Favicon が正しく表示されない場合には、キャッシュまたは履歴 (もしくはその両方) に不整合が発生している可能性が考えられます。まずキャッシュ (一時ファイル) と閲覧の履歴を削除して、問題が改善するか確認しましょう。
Favicon 用の ico ファイルの作成方法
多くのグラフィック ソフトを含むさまざまなツールが利用できますが、一番手軽なのは X-Icon Editor の Web アプリケーションを利用する方法でしょう。HTML5 の Canvas をサポートしているブラウザーでアクセスすれば、既存の画像から簡単にアイコンが作成できます。
参考
- why doesn’t the favicon for my site appear in IE7? (http://blogs.msdn.com/b/jeffdav/archive/2007/03/01/why-doesn-t-the-favicon-for-my-site-appear-in-ie7.aspx)
- サイトのアイコンをカスタマイズする(http://msdn.microsoft.com/ja-jp/library/gg491740.aspx)
- How to Add a Shortcut Icon to a Web Page (http://msdn.microsoft.com/en-us/library/ms537656.aspx)
Hebikuzure's Tech Memo 
コメントを残す