Favicon/アプリアイコン設計 2025 — 失敗しない運用ルール集
アイコンは“小さな画像”ですが、差し替えやプラットフォーム差で意外と事故が起きやすい資産です。 本稿は設置手順ではなく運用に焦点を当て、キャッシュの更新・見え方・サイズのガイドラインを 「実務で困らない」観点でまとめました。設置手順は セットアップ編 を参照してください。
要点（TL;DR）
- 最小セット：16×16 / 32×32 / 180×180 / 192×192 / 512×512（＋任意で mask-icon.svg）。
- 差し替えはファイル名ハッシュ/バージョンで新URLに。キャッシュ削除だけに頼らない。
- iOSホーム追加は角丸でトリミングされる。アイコンは余白多めに設計。
- Safariピン留めは単色のmask-icon＋HTMLの
color属性で着色。 - OGPは別管理。アイコンとは混在させない。
1. サイズとアセットのルール
| 用途 | 推奨ファイル | メモ |
|---|---|---|
| ブラウザタブ | /icons/icon-16.png / /icons/icon-32.png | 古い環境でも崩れないPNGを用意。 |
| iOS Home追加 | /icons/apple-touch-icon.png（180×180） | 角丸で切られるため余白多め・線や文字は中央に。 |
| PWA（Android他） | /icons/icon-192.png / /icons/icon-512.png | Web App Manifest に登録（/app/manifest.ts）。 |
| Safariピン留め | /icons/safari-pinned-tab.svg | 単色の線画。color属性で着色。 |
書き出しの自動化
1枚の1024×1024から sharp などで自動生成するとヒューマンエラーが減ります（コードはセットアップ編付録を参照）。
2. キャッシュ更新のルール（差し替え事故を防ぐ）
- 差し替えは新しいファイル名にする（例：
icon-192.v2.png）。 - CDNは長期キャッシュ、差し替えはPurge or 新URLで。
- HTML内の宣言（
metadata.icons/manifest）にも新URLを反映。
画像キャッシュの原則は CDN/キャッシュ戦略 も参照。
3. 見えとデザインのルール
- 小さい領域でも判別できる単純な形（1〜2色＋強いシルエット）。
- iOS角丸で要素が欠けないよう十分なセーフエリアをとる。
- ダーク/ライトで潰れない明度差を確保。
4. テストとデバッグ
- DevTools → Application → Manifest で表示確認（icons/色）。
- iOS（ショートカットへ追加）、Android（ホーム追加）で実機確認。
- 差し替え後はブラウザ/OSキャッシュをクリア、もしくはファイル名バージョンで更新。
5. よくある失敗（回避策）
- SVGをそのままfaviconにして古い環境で未表示 → PNG 16/32 を併用。
- 相対パスで manifest や OGP を宣言 → クローラで取得失敗。絶対URLに。
- 差し替え時にURL不変 → OS/ブラウザの強キャッシュでいつまでも古いまま。
6. FAQ
ファイル形式はPNGとSVGどちらが主？
実運用の主役はPNGです。SVGはSafariのmask-icon専用（単色）にし、faviconとしての互換はPNGで担保します。
背景透過は必要？
基本は透過。背景の色面と衝突するなら余白を足し、シルエットを優先します。
PWAにしない場合でも manifest は必要？
必須ではありませんが、Androidのホーム追加などで参照されるため置いておくと便利です（/app/manifest.ts）。
7. 公開前チェックリスト
- 16/32/180/192/512 の5点セットが揃った。
- manifest と
metadata.iconsに正しいURLを宣言。 - Safari用の単色mask-iconを用意し、
colorで着色。 - 差し替えは新URL（ファイル名バージョン/ハッシュ）で実施。
- iOS/Androidのホーム追加で見え方を実機確認。
8. まとめ：運用で事故らない“型”を持つ
アイコン運用の鍵はサイズセットと新URL差し替え。この2点さえ守れば、プラットフォーム差やキャッシュ更新に悩まされません。 セットアップ手順は セットアップ編 をどうぞ。