ファビコン形式の仕組み
favicon が壊れた場合、推測するだけで何時間も無駄になります。 ICO ディレクトリ、PNG-in-ICO 圧縮、SVG メディア クエリ、ブラウザ選択ロジックを理解すると、意図を持ってデバッグできるようになります。この詳細な説明には、バイトレベルの動作、例、FAQ、一般的なすべての障害モードのトラブルシューティング パスが含まれています。
favicon リクエスト パイプライン
ページをロードすると、ブラウザは HTML <head> を解析し、<link rel="icon"> の候補を検出し、一致するものがない場合は /favicon.ico をフェッチすることもあります。
各候補には、href URL、タイプ MIME、サイズ属性、SVG コンテンツのメディア クエリなどのヒントが含まれています。
ネットワーク スタックはバイトをダウンロードし、コンテナをデコードし、タブのビットマップにラスタライズして、積極的にキャッシュします。多くの場合、標準の HTTP キャッシュ ヘッダーは無視されます。
Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.
.ico コンテナ
.ico ファイルは、埋め込み画像をリストしたディレクトリ ヘッダーで始まります。各エントリは、幅、高さ、色深度、およびバイト オフセットを記録します。
幅と高さのバイトが 0 の場合は 256 ピクセルを意味します。これは形式仕様の歴史的な癖です。
デコーダーはオフセットをシークし、BMP ビットマップまたは PNG blob を読み取り、ピクセルを UI ツールキットに渡します。リクエストごとに 1 つのフレームのみがデコードされます。
.ico内のPNG
64×64 以上のフレームの場合、PNG 圧縮によりコンテナが大幅に縮小され、フラット アイコンでは目に見える損失は発生しません。
PNG BLOB は、ICO 構造内にネストされた、IHDR チャンクと IDAT チャンクを含む通常の PNG ファイルです。
依然として 256×256 で BMP を出力するジェネレーターは仕様的には間違っていませんが、帯域幅を無駄に消費します。利用可能な場合は、PNG で圧縮されたエントリを優先します。
SVG favicon
SVG favicon は、ページ上のインライン SVG と同様に、ブラウザ SVG エンジンによってタブ サイズでレンダリングされます。
埋め込まれた CSS は prefers-color-scheme を参照でき、2 回目のネットワーク要求なしで 1 つのファイルに明るい外観と暗い外観を表示できます。
外部参照 (フォント、フィルター、リモート画像) は、favicon コンテキストでブロックされる場合があります。 SVG は自己完結型にしてください。
ブラウザが選択する方法
複数の <link rel="icon"> タグが存在する場合、ブラウザはタイプのサポート、サイズの一致、場合によっては宣言の順序に基づいて候補をスコアリングします。
type="image/svg+xml" が設定され、ファイルが正常に読み込まれる場合、通常、Chromium は SVG を優先します。
iOS ホーム画面に apple-touch-icon PNG を使用している間、一部のコンテキストでは Safari に ICO が表示される場合があります (別のコード パス)。
すべての候補が失敗した場合、ブラウザには一般的なドキュメント アイコンが表示され、次のナビゲーションで /favicon.ico を再試行する可能性があります。
デバッグ例
[ネットワーク] タブには favicon.svg の 200 が表示されますが、タブでは ICO が使用されています: SVG は MIME スニフに失敗しました - サーバー上の Content-Type を修正します。
ICO はダウンロードされますが、サイズが間違っているように見えます。16 進ビューアで開きます。中には 16×16 フレームが 1 つしかない可能性があります。
ダーク モード SVG は、Chrome ではなく Firefox で動作します。<style> 内の CSS 構文を確認してください。 Chrome は無効なセレクターに関してより厳密です。
マニフェスト アイコンは無視されました: JSON 構文エラー — DevTools アプリケーション パネルで site.webmanifest を検証してください。
よくある質問
favicon は永久にキャッシュされますか?多くの場合、ページ キャッシュとは関係なく、プロファイルごとに数日かかります。
favicon は CORS に従いますか?通常は不要です。CORS プリフライトなしで画像のように読み込まれます。
favicon に WebP を使用できますか?限定的なサポート。広範囲をカバーするには、ICO、PNG、SVG に限定してください。
なぜ ICO の中に 48×48 があるのでしょうか?従来の Windows シェル サイズ。バンドルに含めると安いです。
トラブルシューティング
断続的に見つからないアイコン: HTML 解析と /favicon.ico フェッチの間の競合 — <head> の早い段階で <link> を宣言します。
ローカルでは修正しますが、CDN では間違っています: .ico の古いエッジ キャッシュ — ファイル名をパージまたはバージョン付けします。
アイコンの反転または間違った色: ソース PNG の EXIF の方向 — ICO を生成する前に EXIF を削除します。
www と apex 上の 2 つの異なるアイコン: 個別のデプロイ - ファイルを統合するか、ホスト名をリダイレクトします。
フォーマットの歴史の概要
ファビコンは、Internet Explorer のお気に入りの 16×16 ICO ファイルとして始まりました。形式が進化しても、事実上の /favicon.ico パスはそのまま残りました。
ディスプレイの密度が高まるにつれ、PNG リンク タグが到着しました。 Apple は、iOS ホーム画面の別のリンク関係として apple-touch-icon を導入しました。
SVG favicon は、ブラウザがページ コンテンツだけでなく Chrome UI にもセキュアな SVG サブセット レンダリングを実装してから注目を集めました。
Web アプリ マニフェストは、Chromium のインストール性監査に関する 192 および 512 PNG 要件を形式化しました。
このタイムラインを理解すると、単一のフォーマットが勝てなかった理由が説明されます。各レイヤーは、以前のレイヤーでは解決できなかった問題を解決しました。
faviconバイトを検査するためのツール
Chrome DevTools Network パネルは、リソース タイプ Img またはファイル名によってフィルタリングします。デバッグ中はキャッシュを無効にします。
curl -I https://yoursite.com/favicon.ico は、ブラウザー キャッシュの干渉なしでステータス、Content-Type、およびキャッシュ ヘッダーを明らかにします。
ImageMagick は、コマンドラインで埋め込まれたフレームと寸法をリストする favicon.ico を識別します。
オンライン ICO アナライザーは、ソフトウェアをインストールせずにディレクトリ エントリを表示します。ロックダウンされた企業のラップトップで役立ちます。
SVG の場合は、テキスト エディタでファイルを開き、外部 xlink:href がドメイン外を指していないことを確認します。
再生成前後のバイト サイズを比較します。サイズが 10 倍低下するということは、通常、ICO 内の PNG 圧縮が BMP に置き換わることを意味します。
サーバーが送信する必要がある MIME タイプ
favicon.ico — image/x-icon または image/vnd.microsoft.icon。ブラウザーは耐性がありますが、正しい MIME はプロキシに役立ちます。
favicon.svg — 画像/svg+xml。テキスト/プレーンが間違っていると、一部のエンジンが SVG をスキップします。
PNG アイコン — 画像/png。 CDN 層の Gzip または Brotli は問題ありません。
nginx タイプ ブロックの設定が間違っていることが、SVG の主な原因です favicon はローカル (Vite 開発サーバー) で動作しますが、運用環境では失敗します。
仕様を読む場所
ICO 構造は、初期の Windows リソース形式で文書化されており、PNG-in-ICO の事実上の標準によって最新化されています。
WHATWG HTML は、ベンダーの調整によりブラウザーが実装する link rel=icon の動作を定義します。
W3C Web アプリ マニフェストでは、インストールを容易にするためのアイコン配列スキーマを指定します。
SVG favicon は、Chrome UI にブラウザが適用される SVG Tiny サブセット ルールに従います。すべての SVG 2 機能がサポートされているわけではありません。
仕様が一致しない場合は、ターゲット ブラウザでテストしてください。事実上の行動が、10 年前のブログ投稿よりも優先されます。
チームが従来の ICO 専用クライアントのサポートを終了する場合は、ブラウザーのバージョンしきい値を含むローカル メモ ファイルを保存してください。
インシデント対応プレイブック
デプロイ後に favicon がサイト全体で壊れた場合は、最初に静的アセットをロールバックします。アイコンのみが失敗する場合、HTML の変更が原因となることはほとんどありません。
インシデント開始から 5 分以内に、CDN 404 ログで favicon.ico および apple-touch-icon.png を確認してください。
git 内の本番環境と最後に正常に動作したアーティファクトの間で応答バイトを比較します。
事後分析: 根本原因が MIME、フレームの欠落、またはキャッシュであるかどうかを文書化します (3 つの異なる修正)。
アイコンが信頼にとってビジネスクリティカルである場合は、1 時間ごとに HEAD リクエスト /favicon.ico を実行する合成モニターを追加します。
ロールバックが数時間ではなく数分になるように、デプロイ アーティファクト内のアイコン ファイルが存在する場所をオンコール エンジニアに指導します。