フロントエンドサイトFaviconの完全設定仕様ガイド

標準的なICOファイルは単一のコンテナに複数の異なるサイズのビットマップを埋め込むことに対応しており、一般的な設定では16×16、32×32、48×48の3つのサイズが含まれます。利用シーンごとに対応するサイズが自動的に適用され、16×16はブラウザのタブバー、32×32はブックマークバー、48×48はデスクトップショートカットで使用されます。

ICOファイルのマルチサイズ保存はICOフォーマット仕様に準拠しており、各サイズがそれぞれ独立したビットマップデータブロックに対応し、ブラウザが現在のレンダリングシーンに応じて対応するサイズのビットマップを読み込むため、複数の独立したファイルを生成する必要はありません。古いバージョンのIEブラウザはICO形式のfaviconのみ読み込みに対応しているため、ルートディレクトリにfavicon.icoを配置しておくことで古いバージョンからのアクセスと互換性を持たせることができます。

Chrome、Firefox、EdgeなどのモダンブラウザはいずれもPNG形式のfaviconに対応しています。宣言方法ではlinkタグを使用して対応するsize属性を追加し、コア設定では32×32と192×192の2つの仕様が必要です。32×32はモダンブラウザにおける高解像度タブバーのレンダリングに適合し、192×192はAndroidのネイティブPWAアプリケーションアイコンとして使用されます。

標準的な宣言コードは <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> および <link rel="icon" type="image/png" href="/favicon-192x192.png" sizes="192x192"> です。ブラウザはシーンに応じて対応するサイズを自動的に選択して読み込みます。

一部のモダンブラウザはSVG形式のfaviconに対応しています。SVGは組み込みのメディアクエリによって異なるテーマでの色適応を実現でき、システムのダークモード切り替えに適応します。SVG適応の原理は、SVGコード内にprefers-color-schemeに対応するメディアクエリを追加し、ライトモードとダークモードそれぞれでアイコンの塗りつぶし色を定義するというものです。

SVG faviconを宣言する際は、type="image/svg+xml" でファイル形式を指定します。従来のICOやPNGよりも優先度が高く、ブラウザはSVG形式を優先的に読み込みます。開発者はSVG to ICO コンバーターを使用して、編集・適応済みのSVGをICO形式に変換し、より多くのアクセスシーンと互換性を持たせることができます。

Apple iOSではホーム画面に追加されたWebページ用に専用のアイコンであるapple-touch-iconが提供されています。現在の仕様では180×180のPNGアイコンが要求されます。旧バージョンでは複数の異なるサイズの宣言に対応していましたが、iOS 12以降ではすべてのAppleデバイスに適合させるために180×180サイズが優先的に使用されます。

標準的な宣言コードは <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png"> です。size属性を追加する必要はなく、iOSシステムが自動的に180×180サイズを認識して適応します。角丸やハイライト効果はiOSシステムが自動的に処理するため、開発者が事前に角丸処理を行う必要はありません。

PWAアプリケーションは基本的なアプリケーション情報を宣言するためにmanifest.jsonファイルを設定する必要があり、対応するサイズのアイコンフィールドを含める必要があります。PWAのインストール要件を満たすために512×512のアプリケーションアイコンを宣言してください。theme-colorはmetaタグとmanifestの両方で宣言する必要があり、ブラウザアドレスバーのテーマ色適合に使用されます。

完全な設定を行うには <meta name="theme-color" content="#ffffff"> を追加し、manifest.json内にも同じ名前のフィールドを追加し、値をmetaタグと一致させることで、異なるブラウザのアドレスバーレンダリングロジックに適応させます。