ファビコン形式の仕組み
各形式の仕組みを理解すると、避けられない「ファビコンが表示されない」問題をデバッグするのに役立ちます。
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
.ico コンテナ
.ico ファイルは、ヘッダーの後に 1 つ以上の画像エントリが続くものです。各エントリは BMP または PNG で、それぞれに幅、高さ、ビット深度があります。
ブラウザはディレクトリを解析し、要求されたサイズに一致するエントリを選択し、そのエントリだけをデコードします。
.ico 内の PNG
64×64 以上のサイズの場合、PNG 圧縮により、視覚的な損失なしにファイル サイズが 5 ～ 10 倍に削減されます。最新のジェネレーター (私たちのものを含む) はこれを自動的に行います。
SVG ファビコン
SVG ファビコンは通常の SVG ファイルです。ブラウザは他の SVG と同じようにレンダリングし、<style> ブロックは pres-color-scheme に基づいて色を適応させることができます。
ブラウザが選択する方法
複数の <link rel="icon"> タグを送信すると、ブラウザはサーフェスに最も一致するタグを選択します (タブ、ブックマーク、インストール)。サポートされている場合は SVG が優先されます。 .ico はフォールバックです。
よくある質問
What is inside a .ico file?
A header plus a directory of image entries. Each entry can be BMP or PNG at a specific width and height.
How do browsers choose which favicon to display?
Browsers read all <link rel="icon"> tags and pick the best match for the surface — tab, bookmark, or install prompt. SVG is preferred when supported; .ico is the fallback.
Why use PNG inside an .ico instead of BMP?
PNG compression cuts file size 5–10× at 64×256 with no visible loss, which speeds up page loads.
Can I use only SVG for favicons?
Not safely. Always ship favicon.ico as a fallback for older browsers, Windows shortcuts, and embedders that ignore SVG.