マニフェストアイコン：Web アプリマニフェストの icons 配列
マニフェストアイコンは、サイトがインストールされたときの振る舞いを記述する JSON ファイル、すなわち Web アプリマニフェストの icons 配列に並ぶエントリです。各エントリは src、sizes 文字列、通常は type、そして任意で purpose を与え、ブラウザはホーム画面・アプリランチャー・タスクスイッチャー・スプラッシュ画面に最も近いものを選びます。最低でも 192x192 と 512x512 の PNG を宣言しましょう。
この配列は何のためにあるか
Web アプリマニフェストは head からリンクされる JSON ファイルで、サイトがインストールされたときにどう振る舞うべきか（名前、開始 URL、表示モード、テーマカラー、そしてアイコン）をブラウザに伝えます。マニフェストアイコンは、ブラウザのクロームの外側で使われるもの、つまりランチャー、アプリスイッチャー、インストールプロンプト、スプラッシュ画面のためのものです。
ファビコンの link タグとは違い、この配列は指示の集合ではなく候補のリストです。各ファイルが何であるかを記述し、ブラウザが表示面ごとに選びます。そのためエントリを多く宣言しても負担は小さく、表示面が必要とするまで何もダウンロードされません。
最小構成のマニフェスト
{
"name": "Example App",
"short_name": "Example",
"start_url": "/",
"display": "standalone",
"theme_color": "#0b0b0b",
"background_color": "#ffffff",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}head から <link rel="manifest" href="/manifest.json"> でリンクします。ファイル名は manifest.webmanifest でも構いません。重要なのは link タグの方です。
アイコンエントリのフィールド
| フィールド | 役割 |
|---|---|
| src | 画像へのパス。マニフェストの URL を基準に解決される。必須。 |
| sizes | "幅x高さ" 形式の寸法。複数サイズを含むファイルではスペース区切りで複数指定できる。 |
| type | MIME タイプ（例：image/png）。デコードできないフォーマットをブラウザがスキップできる。 |
| purpose | "any"（既定）、切り抜いても安全なアイコン向けの "maskable"、または "monochrome"。 |
マニフェストアイコンに関するよくある質問
なぜ 192 と 512 なのですか？
192x192 は、一般的な画面密度で Android がホーム画面アイコンに使うサイズであり、512x512 はスプラッシュ画面とインストールプロンプトに使われるサイズです。この二つが揃うと、Chromium 系ブラウザのインストール可能性チェックを満たします。
マニフェストアイコンはファビコンの代わりになりますか？
いいえ。インストール済みアプリの表示面だけをカバーします。ブラウザのタブ、ブックマーク、履歴は依然として link rel="icon" タグと /favicon.ico から来るので、両方を出荷してください。
iOS はマニフェストアイコンを読みますか？
Safari は名前や表示モードなどのためにマニフェストを読みますが、ホーム画面のアイコンは apple-touch-icon の link から来ます。iOS と Android の両方でアイコンを正しくしたいなら、両方を宣言してください。