PNG vs ICO：どちらのFavicon形式を使用すべきですか？
Favicon形式について混乱していますか？PNGとICOの主な違い、選択方法、および2026年のモダンなウェブサイトのベストプラクティスについて学びましょう。
結論：2026 年の基本方針
まず結論として、現在の実務では ICO と PNG の併用 が最も安全です。
ICO だけではモダン環境に最適化しにくく、PNG だけでは古い環境や一部の取得ロジックで取りこぼしが起きることがあります。
そのため、/favicon.ico をベースにしつつ、32x32 と 16x16 の PNG、さらに Apple Touch Icon を追加する構成が推奨されます。
PNG と ICO の違い（実務視点）
- ICO：複数サイズを 1 ファイルにまとめられる。互換性が高い。
- PNG：画質が安定し、透過や色再現が分かりやすい。
- ICO の弱点：作成ツールによって圧縮品質に差が出る。
- PNG の弱点：単体では古い参照先を完全に置き換えられない場合がある。
重要なのは「どちらが絶対に優れているか」ではなく、ユーザー環境のばらつきに対して どれだけ表示失敗を減らせるかです。運用上は、ICO を互換レイヤー、PNG を品質レイヤーとして扱うと管理しやすくなります。
推奨ファイル構成（最小セット）
/favicon.ico（16/32 を内包）/favicon-32x32.png/favicon-16x16.png/apple-touch-icon.png（180x180）
PWA を使う場合は 192x192 と 512x512 も追加し、
manifest.json とあわせて管理してください。
どちらを優先すべきかの判断基準
- 企業サイトやメディア：ICO + PNG（互換性優先）
- アプリ系 LP や PWA：PNG 重視 + ICO 補完
- 更新頻度が高い運用：PNG を主運用にして差し替えを簡単に
HTML での設定例
<link rel="icon" href="/favicon.ico" sizes="any">
<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">運用では、ファイル更新後にクエリ付き URL に切り替えるか、キャッシュクリアを実施して反映遅延を避けるのが安全です。
よくある失敗と回避策
- 表示が古いまま：ブラウザと CDN のキャッシュを同時にクリア。
- モバイルだけ表示されない：Apple Touch Icon が不足している。
- にじむ・ぼやける：元画像を 512x512 以上で作成してから縮小。
- 色味が変わる：ICO 変換時の設定を見直し、PNG も併用する。
公開前チェックリスト
- ICO と PNG の両方を配置済み。
- link タグのパスに 404 がない。
- デスクトップとスマホで表示確認済み。
- 更新後のキャッシュ戦略を実施済み。