概要

ファビコン（favorite icon の略）は、ブラウザのユーザーインターフェース上で、Webサイトまたは個別のWebページを表す小さな画像ファイルです。通常はブラウザのタブ、アドレスバーでページURLの横、ブックマークやお気に入りの一覧、さらに履歴の項目や検索結果などにも表示されます。最もよく知られている元来のサイズは16×16ピクセルですが、現在のブラウザや端末ではそれより大きいサイズも使われるため、表示環境に合わせて複数の版を用意するのが一般的です。

特性とよく使われる形式

ファビコンは通常、正方形で、非常に小さいサイズでも判別しやすいように作られます。代表的なファイル形式には、複数の解像度を1つのファイルに含められる従来型のICO、可逆圧縮のラスター画像であるPNG、そして拡大縮小してもきれいに表示しやすいベクター形式のSVGがあります。よく用意されるサイズは、デスクトップ向けの16×16と32×32、さらに高解像度表示やピン留めタブ向けの48×48、64×64、またはそれ以上です。モバイルのホーム画面やアプリのショートカットでは、180×180のようなサイズの専用の「タッチアイコン」を別に用意することもあります。

歴史と普及

ファビコンの概念は、初期のデスクトップブラウザにおける特定の機能として生まれ、ブラウザがお気に入り一覧の各項目にそのアイコンを表示するようになったことで広まりました。その後、対応は広がり、現在のほとんどの主要ブラウザは、Webページが提供するファビコンを認識します。Web標準も進化し、ページのHTMLから1つ以上のアイコンファイルへリンクする方法が推奨されるようになりました。これにより、ブラウザは現在の状況に適した画像を見つけやすくなります。

用途、例、ベストプラクティス

  • ファビコンの提供方法: HTMLのhead内に、アイコンファイルを指すlink要素を追加します。必要に応じて、サイズや形式が異なる複数のファイルを用意します。
  • デザインのコツ: 単純でコントラストの高い形を使い、細かすぎる表現は避けます。小さいサイズでも読みやすいか、またブラウザのダークテーマやライトテーマの両方で見分けやすいかを確認します。
  • 技術面の注意: ICOとPNGの両方を用意するなど、フォールバックを含めます。Retina表示やピン留めサイト用のインターフェースには大きめの画像を用意し、ブラウザがファビコンをキャッシュする点にも注意します。更新時にはキャッシュ対策が必要になることがあります。

区別と注目点

ファビコンは、インストールされたネイティブアプリで使われるアプリアイコンとは別物ですが、同じデザインを流用することはよくあります。モバイルプラットフォームでは、標準のファビコンとはサイズや用途が異なる専用の「apple-touch-icon」などのファイルも使われます。一部のプラットフォームは、劣化なく拡大縮小できるSVGファビコンに対応していますが、現在もICOやPNGを好むものがあります。実用的な指針や互換性の詳細については、Webアイコンのガイドラインや、ブラウザのアイコン対応に関するドキュメントを参照してください。

簡単なチェックリスト:

  1. 少なくとも16×16と32×32の版を用意し、モバイルや高DPI向けに大きめのサイズも検討する。
  2. 広い互換性のために、ICOとPNG（またはSVG）の両方の形式を用意する。
  3. ページのheadでアイコンをリンクし、複数のブラウザと端末で表示を確認する。