Faviconサイズガイド：完全なサイズリファレンス (2026)
必要なfaviconサイズがわからないですか？この完全なガイドでは、ブラウザ、モバイルデバイス、プラットフォームのすべての標準faviconサイズをカバーしています。
最初に押さえるべき 6 サイズ
すべての環境で安定表示を狙うなら、まず 16x16、32x32、48x48、180x180、192x192、512x512 の 6 サイズを用意してください。多くのサイトでは、この組み合わせで主要ケースをほぼ網羅できます。
- 16x16：ブラウザタブの基本表示。
- 32x32：高解像度ディスプレイ向け。
- 48x48：Windows 系のショートカットで利用されることが多い。
- 180x180：Apple Touch Icon 用。
- 192x192：Android ホーム画面向け。
- 512x512：PWA の高解像度アイコン用。
プラットフォーム別の実務的な優先順位
失敗しやすいポイントは「サイズ不足」よりも「参照設定の不一致」です。 画像を作るだけでなく、HTML の link タグ、manifest、キャッシュ更新までセットで実施してください。
favicon.ico（16 + 32）を最優先で配置。- 次に
favicon-32x32.pngとfavicon-16x16.pngを追加。 - iOS 対策として
apple-touch-icon 180x180を追加。 - PWA なら
192x192と512x512を manifest に登録。
そのまま使えるサイズ構成
最小構成で運用する場合は、次の 6 ファイルを推奨します。
/favicon.ico（16 / 32 を内包）/favicon-16x16.png/favicon-32x32.png/apple-touch-icon.png（180x180）/android-chrome-192x192.png/android-chrome-512x512.png
HTML 参照タグの推奨例
ブラウザ互換性を高めるため、ICO → PNG → Apple Touch の順で指定するのが安全です。
<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">WordPress / Shopify / Astro の違い
同じ favicon でも設定箇所は CMS ごとに異なります。 WordPress は管理画面のサイトアイコン、Shopify はテーマ設定、Astro は public 配置と head 参照が基本です。
- WordPress：テーマが icon タグを重複出力していないか確認。
- Shopify：保存後に CDN キャッシュで反映が遅れる場合がある。
- Astro：ビルド後にファイルが正しいパスに存在するか確認。
よくある失敗と対処法
- 変更後に表示が古い：ブラウザと CDN のキャッシュを削除。
- iPhone で表示されない：180x180 が未設定の可能性。
- ぼやける：元画像を 512x512 以上で作成。
- 色味が崩れる：ICO だけでなく PNG も併用。
- 検索結果に出ない：検索エンジン反映まで数日かかる。
公開前チェックリスト
- 必要ファイル（ICO / PNG / Apple / PWA）をすべて配置済み。
- link タグの URL に 404 がない。
- PC とスマホ両方で表示確認済み。
- 更新後にキャッシュクリアを実施済み。
- 多言語サイトでも同一ポリシーで運用できる構成になっている。