全プラットフォーム対応 完全Faviconサイズガイド

完全Faviconサイズガイド

モダンなWebサイトでは、すべてのプラットフォームとデバイスに対応するため、複数の解像度のFaviconが必要です。すべてのFaviconサイズとその用途を完全に解説します。

ブラウザタブ用Favicon

• 16x16 — クラシックなFaviconサイズ。標準解像度ディスプレイのブラウザタブに表示されます。わずか256ピクセルで、すべてのピクセルが重要です。シンプルでコントラストの高いデザインが最適です。
• 32x32 — Retina/高DPIディスプレイのブラウザで使用されます。16x16の2倍解像度で表示されるため、モダンなスクリーンではより鮮明なアイコンになります。
• 48x48 — Windowsのタスクバーピンやデスクトップショートカットに使用されます。一部のブラウザも中間サイズとして使用します。

Appleデバイス

• 180x180 — Apple Touch Icon。ユーザーがiPhoneやiPadのホーム画面にWebサイトを追加した際に表示されるアイコンです。Appleが自動的に角丸や視覚効果を適用します。

Androidデバイス

• 192x192 — Android Chromeの「ホーム画面に追加」機能やアプリドロワーのアプリアイコンとして使用されます。Web Appマニフェストで指定します。

プログレッシブWebアプリ

• 512x512 — 最大の標準サイズで、PWAのスプラッシュスクリーンに使用されます。一部のアプリストアやプラットフォームでもプライマリアイコンとして使用されます。

ベストプラクティス

1. 高解像度のソース画像（最低512x512）から始めて縮小する
2. すべてのサイズでテスト — 512pxで良く見えるものが16pxでは判別不能な場合がある
3. 透明度を賢く使う — 透明背景はほとんどのプラットフォームで機能するが、Apple Touch Iconはデフォルトで白い背景になる
4. 大小サイズ用に別々のデザインを検討する
5. ICOファイルを含める — 古いブラウザのフォールバック用