ファビコンとは？なぜ重要なのか
ファビコン（favicon）はブラウザのタブやブックマークに表示される小さなアイコンです。視覚的なブランド識別として重要なだけでなく、PWA（プログレッシブウェブアプリ）対応やホーム画面追加の際にも使用されます。
📌 ファビコンはプラットフォームごとに推奨サイズが異なります。すべてのプラットフォームに対応することで、ユーザー体験が向上します。
プラットフォーム別推奨サイズ
| プラットフォーム | 推奨サイズ | ファイル形式 | 設定方法 |
|---|---|---|---|
| 🌐 ブラウザ（基本） | 32×32px / 16×16px | ICO / PNG | <link rel="icon"> |
| 🍎 iOS / Safari | 180×180px | PNG | <link rel="apple-touch-icon"> |
| 🤖 Android / PWA | 192×192px / 512×512px | PNG | manifest.json |
| 🪟 Windows | 144×144px | PNG | msapplication-TileImage |
| 📱 モダンブラウザ | スケーラブル | SVG | <link rel="icon" type="image/svg+xml"> |
よくある質問
favicon.icoとPNGはどちらが良いですか？
現代のブラウザはPNGを広くサポートしていますが、レガシーブラウザ対応のためfavicon.icoも用意することを推奨します。両方設定しておくのが最も確実です。SVGも追加すると高解像度ディスプレイで綺麗に表示されます。
apple-touch-iconがないとどうなりますか？
iOSでホーム画面に追加した際に、ウェブサイトのスクリーンショットが代わりに使用されます。ブランドイメージを統一するためにも180×180pxのapple-touch-iconの設定を推奨します。
manifest.jsonとは何ですか？
PWA（プログレッシブウェブアプリ）のメタ情報を記述するJSONファイルです。アプリ名、テーマカラー、アイコンなどを定義します。AndroidやChrome系ブラウザでホーム画面追加時に使用されます。
ファビコンのファイルサイズに制限はありますか？
明確な制限はありませんが、100KB以下を推奨します。特にfavicon.ico（16px/32px）は数KBが適切です。大きすぎるとページ初回読み込み時のリソース無駄になります。