ICO と PNG のファビコン：どちらを使うべきか？
主要なファビコンには PNG を使い、フォールバックとしてサイトのルートに favicon.ico を置いておきましょう。PNG は完全な 24 ビットカラーと本物のアルファチャンネルを持ち、圧縮効率もよく、現行のあらゆるブラウザが link タグから受け付けます。ICO に残る利点は、複数のサイズを一つのファイルにまとめられること、そしてタグが無いときにクライアントが /favicon.ico にリクエストするものであることです。両方を出荷しても余分なファイル 1 つ分のコストしかかからず、このトレードオフは完全に解消されます。
二つのフォーマット
ICO は Windows のアイコンコンテナで、ファビコンのフォーマットになったのは偶然でした。Internet Explorer が /favicon.ico をリクエストし、みなが用意したのです。その本質的な特徴は、一つの .ico ファイルが異なるサイズの複数のビットマップを保持し、利用側が一つを選ぶという点にあります。
PNG は、可逆圧縮と完全なアルファチャンネルを備えた、ごく普通のウェブ画像フォーマットです。1 サイズの画像を 1 枚だけ保持するため、複数サイズをカバーするには複数のファイルと複数の link タグが必要になります。これはモダンブラウザがいずれにせよ期待する形です。
どちらを選ぶべきか
ICO
フォールバックとパス直打ちのリクエスト
- 一つのファイルに 16・32・48 ピクセルのビットマップをまとめて持てる
- ブラウザ・クローラー・フィードリーダーが link タグ無しで /favicon.ico からリクエストする
- ごく古いものも含め、これまで出荷されたあらゆるブラウザが理解できる
- Windows のデスクトップショートカット向けのネイティブフォーマット
- 作成・確認がしづらく、多くのツールはビルド生成物として扱う
PNG
Start here主要なファビコン
- 24 ビットカラーなので、グラデーションや写真的なマークも保たれる
- 完全なアルファチャンネルにより、どんなタブ色に対してもエッジがきれいにアンチエイリアスされる
- 同じ品質なら、対応する ICO より小さい
- link rel="icon" 経由で現行のあらゆるブラウザがサポートする
- Android と PWA のマニフェストがインストール用アイコンに期待するフォーマット
技術的な比較
| 項目 | ICO | PNG |
|---|---|---|
| 色深度 | 従来ファイルでは 8 ビットパレット、モダンなものでは 32 ビット | 24 ビットカラー + 8 ビットアルファ |
| 透過 | 従来ファイルでは 1 ビットマスク、32 ビットエントリではアルファチャンネル | 完全なアルファチャンネル |
| 1 ファイルあたりのサイズ数 | 複数、通常は 16・32・48 | 1 つ |
| 圧縮 | 無圧縮ビットマップ、または PNG 圧縮されたエントリ | 可逆の DEFLATE |
| link タグ無しでリクエストされるか | はい、/favicon.ico で | いいえ |
head に何を書くか
<!-- PNG first: modern browsers pick these -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- ICO fallback; also served from /favicon.ico for bare requests -->
<link rel="icon" href="/favicon.ico" sizes="any">両方を宣言しても競合にはなりません。ブラウザはすべての icon リンクを読み、type とサイズで照合し、ICO を好む場合か PNG が失敗した場合にのみ ICO を使います。
ICO と PNG に関するよくある質問
favicon.ico は完全に廃止できますか？
できます。PNG の link タグがあれば、モダンブラウザは問題ありません。壊れるのは、HTML を解析せずに /favicon.ico をパスでリクエストするもの（クローラー、フィードリーダー、リンクプレビュー用ボット、一部の解析ツール）で、それらは 404 を記録して何も表示しません。
両方を宣言したらどちらが勝ちますか？
各リンクの type とサイズ属性を使って、ブラウザが決めます。実際には、現行のブラウザは必要なサイズに最もよく合う PNG を採り、ほかに合うものが無ければ ICO にフォールバックします。
ICO は PNG より品質が劣りますか？
本質的にはそうではありません。32 ビットの ICO エントリは PNG と同じ色とアルファを持ち、多くの ICO ファイルは文字どおり PNG データを埋め込んでいます。品質への不満は、1 ビット透過の古い 8 ビットパレット ICO から来ており、こうしたものはギザギザした固いエッジになります。