favicon フォーマット比較: ICO vs PNG vs SVG
3 つのフォーマットには、それぞれ 3 つの役割があります。/favicon.ico のパスと古いクライアントには .ico、モダンブラウザとすべてのアプリアイコンサイズには PNG、そしてシャープでテーマに対応したタブアイコンには SVG を使いましょう。
各フォーマットには異なる役割がある
唯一最良の favicon フォーマットというものは存在しません。それぞれが、他では対応できないケースをカバーしています。1 つだけ選んですべてに無理やり使うと、タブが空白になったり、ホーム画面にグレーの四角が表示されたりします。
.ico フォーマットは、複数のサイズを 1 つのファイルに収めるコンテナです。これが重要なのは、ブラウザやクローラーが今でもデフォルトで /favicon.ico をリクエストし、古いクライアントは .ico しか理解できないからです。本物の .ico は、拡張子だけ変えた PNG ではありません。ファイル名を変えても、名前が変わるだけで中身のバイト列は変わらず、ほとんどのクライアントはそれを拒否します。
PNG は主力です。あらゆるモダンブラウザが読み込め、すべてのアプリアイコンと manifest の枠（16、32、180、192、512）は PNG です。SVG は新顔で、どんなサイズでもシャープさを保ち、ファイル内の media query でダークモード用に色を切り替えられる、1 つのベクターファイルです。
ICO vs PNG vs SVG
| フォーマット | 得意な用途 | 注意点 |
|---|---|---|
| .ico | /favicon.ico のパス、および .ico しか読めない古いブラウザやクローラー | 拡張子を変えただけの PNG ではなく、複数サイズを含む本物のコンテナ（16 + 32 + 48）である必要があります。アプリアイコンには使わないでください。 |
| PNG | モダンブラウザのタブ、およびすべてのアプリアイコンと manifest のサイズ（16、32、180、192、512） | ラスター形式なので、サイズごとに別ファイルになります。すべてのサイズが必要で、1 つの PNG ですべてをカバーすることはできません。 |
| SVG | どんなサイズにも拡大でき、ダークモードで色を切り替えられる、1 つのシャープなタブアイコン | /favicon.ico としては無効で、iOS や Android のホーム画面には使われません。シンプルに保ちましょう。エフェクトはブラウザによって表示が異なることがあります。 |
head 内での組み合わせ方
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">SVG を読めるブラウザは favicon.svg を使います。それ以外はすべて PNG と .ico にフォールバックします。apple-touch-icon は PNG のままにします。iOS はここで SVG を無視するためです。
よくある質問
PNG の名前を favicon.ico に変えるだけではダメですか？
ダメです。.ico は独自のコンテナフォーマットであり、拡張子だけ違う PNG ではありません。ラベルの誤ったファイルを許容するブラウザもありますが、多くはそうではなく、クローラーはさらに厳格です。複数サイズを含む本物の .ico を生成してください。
PNG と SVG があっても favicon.ico は必要ですか？
はい、1 つは残してください。ブラウザ、フィードリーダー、検索クローラーは今でも、タグなしで /favicon.ico をリクエストします。そのパスにあるファイルは、link タグが見落とされたときの安全網になります。
SVG の favicon は PNG より優れていますか？
タブアイコンについては、そうなり得ます。1 つのファイルであらゆるサイズでシャープさを保ち、ダークモードにも適応できるからです。ただしホーム画面用の PNG アプリアイコンを置き換えるものではないので、両方を使いましょう。
512x512 の manifest アイコンにはどのフォーマットを使いますか？
PNG です。manifest の icons 配列は、maskable を含めて 192 と 512 のラスター PNG を期待します。SVG は、Android がインストール済みアプリのアイコンに使うフォーマットではありません。