ファビコンの ICO と PNG
ICO は普遍的ですがレガシーです。 PNG は最新ですが、明示的なリンクが必要です。 This comparison covers browser behavior, file size, transparency, worked examples, and how to ship both formats without duplication headaches.
この比較が依然として重要な理由
フロントエンドを初めて使用するチームは、モダンな感じがするという理由で PNG を選択したり、2012 年のチュートリアルでそう言われていたため ICO を選択したりすることがよくあります。 2026 年の正解は、ほとんどの場合両方であり、異なるジョブに使用されます。
ICO はコンテナ形式です。1 つのファイルに多数のビットマップが埋め込まれています。 PNG は、ファイルごとに 1 つのラスター イメージです。ブラウザは、タブ用と PWA インストール バナー用に何を取得するかを決定する際に、これらを異なる方法で処理します。
間違った選択をすると、タブがぼやけたり、ダウンロードが肥大化したり、Windows ショートカットのアイコンが消えたりする可能性があります。このガイドでは、各形式が最適な場所と、それらを組み合わせる方法について説明します。
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: ユニバーサル フォールバック
<link> タグを追加しない場合でも、すべてのデスクトップ ブラウザは /favicon.ico を要求します。この暗黙的なフェッチが、ルート .ico が必須のままである理由です。
コンテナー内では、各エントリに幅、高さ、ピクセル データ (通常、64×64 以上のサイズでは PNG 圧縮) が格納されます。クライアントは、表示密度に最も近いものを選択します。
Windows Explorer、Outlook リンク プレビュー、および従来の RSS リーダーは依然として .ico に依存しています。これをスキップすると、HTML <head> にアクセスしたことがないユーザーのアイコンが壊れます。
PNG: あらゆる密度でピクセルパーフェクト
PNG では、ファイルごとに 1 つの既知の解像度が提供されます。明示的にリンクします: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">。
高 DPI ディスプレイの利点は、ブラウザが 2 倍の密度で 16×16 CSS スロットにレンダリングする 32×32 PNG を出荷できるためです。つまり、単純な 16×16 アップスケールよりも鮮明です。
PWA には、192×192 および 512×512 の PNG マニフェスト アイコンが必要です。 Apple タッチ アイコンは 180×180 PNG を使用します。これらのサイズは、従来のマルチサイズ .ico ワークフローには属しません。
並べて比較
ブラウザのサポート: ICO は、暗黙的な /favicon.ico フェッチで優先されます。 Retina タブと Android ランチャーのサイズを宣言すると、PNG が優先されます。
ファイル サイズ: PNG 圧縮された 128 および 256 エントリを含む適切に構築された .ico は、多くの場合、6 つの個別の PNG ファイルよりも小さくなります。 1 つまたは 2 つのサイズだけが必要な場合は、ゆったりとした PNG が最適です。
透明性: 正しくエンコードされた場合、どちらもアルファをサポートします。不正な .ico ツールにより、透明度が白にフラットになります。 PNG アルファをコンテナ内に保存するジェネレーターを使用します。
オーサリング: PNG は、どの画像ビューアでも簡単にプレビューできます。 ICO にはマルチサイズのエクスポート ツールが必要です。そのためにジェネレーターが存在します。
実践例
最小限のブログ: ルートにあるのは favicon.ico だけです。 <link> タグは必要ありません。個人サイトでは許容されます。
SaaS マーケティング サイト: favicon.ico プラス favicon.svg プラス 180×180 apple-touch-icon.png。 <head> で宣言。デスクトップ、iOS、ソーシャル埋め込みをカバーします。
インストール可能な PWA: 従来のタブ クライアント用に favicon.ico を維持しながら、android-chrome-192x192.png と android-chrome-512x512.png を site.webmanifest に追加します。
Windows デスクトップ アプリ ラッパー: Electron または Tauri 用の 256×256 対応 .ico を出荷します。固定サイズのアプリ内 UI のオプションの PNG。
評決: 両方を一緒に使用する
ユニバーサル サポートと暗黙的フェッチのために、マルチサイズ favicon.ico を出荷します。 apple-touch-icon、マニフェスト アイコン、およびオプションのサイズごとの <link> タグに PNG バリアントを追加します。
マークがベクター対応で、ダークモード対応のタブが必要な場合は、SVG を上に重ねます。 ICO はフロアのままです。 SVG と PNG は最適化です。
拡張子の名前を変更して PNG を ICO に変換しないでください。実際の .ico ファイルには、適切なディレクトリ構造とサイズごとのフレームが必要です。
よくある質問
ICO は非推奨ですか?いいえ、ブラウザは依然としてデフォルトでそれを取得します。それは使用法ではなく、設計上のレガシーです。
PNG を favicon.ico と置き換えることはできますか?安全ではありません。暗黙的な /favicon.ico リクエストと多くの Windows サーフェスが見逃されます。
どの PNG サイズが最も重要ですか?タブの場合は 32×32、iOS の場合は 180×180、PWA の場合は 192 および 512。
ICO はアニメーションをサポートしていますか?古典的なアニメーション favicon は廃止されました。代わりに、静的なマルチサイズ .ico を用意します。
トラブルシューティング
Chrome には PNG が表示されますが、Edge にはぼやけたアイコンが表示されます。Edge はまだ古い .ico キャッシュを読み取っている可能性があります。鮮明な 32×32 フレームで .ico を再生成します。
ICO ファイルは 300KB 以上です。おそらく 256×256 の非圧縮 BMP エントリです。コンテナ内で PNG 圧縮して再エクスポートします。
PNG は鮮明に見えますが、ICO はそうではありません。PNG よりも小さなソースから .ico を構築した可能性があります。両方に同じ 512×512 マスターを使用します。
ICO のみで透明性が失われます。ツールは、PNG 圧縮エントリの代わりに 32 ビット BMP をエンコードしました。ジェネレーターを切り替えるか、アルファを保持して再エクスポートします。
迅速な意思決定ガイド
暗黙的な /favicon.ico サポートまたは Windows ショートカットが必要な場合: ICO を出荷します。
明示的な制御による Retina タブの鮮明さが必要な場合: PNG <link> タグを 32×32 で追加するか、バンドル サイズを ICO で追加します。
PWA インストール UI が必要な場合: マニフェスト 192 および 512 の PNG — ICO はマニフェスト アイコンを置き換えません。
タブで無限スケーリングとダークモード CSS が必要な場合: SVG を追加しますが、その下に ICO は残しておきます。
アイコンが 1 つある静的サイトで帯域幅が重要な場合、適切に圧縮されたマルチサイズ ICO だけでは、多くの場合、ICO と 3 つの緩い PNG よりも小さくなります。
設計を毎週繰り返す場合: SVG を Git にソースとして保持し、スクリプトを介してリリース タグごとに ICO および PNG エクスポートを再生成します。
PNG のみから ICO+PNG への移行
View Source または DevTools を使用して現在のタグを監査します。すべての rel="icon" および apple-touch-icon href がすでにデプロイされていることに注意してください。
ルーズ ファイルに使用したものと同じマスター PNG からマルチサイズ favicon.ico を生成します。無関係なアセットの名前を変更せずに、ルート /favicon.ico を置き換えます。
既存の PNG <link> タグが機能する場合はそのままにしておきます。古いパーサーがすぐに認識できるように、リストの最初に ICO を追加します。
トラフィックが少ないときに展開し、特に /favicon.ico の CDN キャッシュを削除し、curl -I で Content-Type が image/x-icon または image/vnd.microsoft.icon であることを確認します。
移行後に Google Search Console でアイコン URL のクロール エラーを検索します。壊れたルート アイコンがソフト 404 としてログに現れることがあります。