PWA アイコン：インストール可能なアプリに必要なもの
ブラウザがサイトをインストール可能な PWA として扱うには、そのマニフェストが少なくとも 192x192 と 512x512 の PNG アイコンを列挙している必要があります。Android がランチャーに合わせて形を整えられるよう、マスカブルアイコンが強く推奨され、iOS はホーム画面アイコンにマニフェストを無視するため、依然として別途 apple-touch-icon が必要です。192／512 のペアを欠くとインストールプロンプトは現れません。
インストールのゲート
Chrome やその他の Chromium ブラウザは、マニフェストが 192x192 と 512x512 の両方を列挙するまで、PWA のインストールを提案しません。このペアは絶対的な要件で、これが無ければマニフェストに他に何が含まれていようとインストールプロンプトは出ません。
192 はホーム画面のショートカットにも使われ、512 はスプラッシュ画面と高密度ディスプレイに使われます。マスカブル版があれば、Android はアイコンを白いボックスに収める代わりに、ランチャーが使う形に切り抜けます。
PWA に必要なアイコン
| アイコン | なぜ必要か |
|---|---|
| 192x192 PNG | インストール要件とホーム画面のショートカット |
| 512x512 PNG | スプラッシュ画面と高密度ディスプレイ |
| マスカブルアイコン | Android がアイコンをランチャーの形に整えられる |
| apple-touch-icon 180x180 | iOS のホーム画面：マニフェストではカバーされない |
PWA アイコンに関するよくある質問
PWA にはどのアイコンサイズが必要ですか？
最低でもマニフェストに 192x192 と 512x512 の PNG、できればマスカブル版も、そして iOS のホーム画面向けに 180x180 の apple-touch-icon です。
なぜ私の PWA はインストールできないのですか？
最もよくある原因は、マニフェストに 192x192 か 512x512 のアイコンが欠けていることです。どちらもブラウザがインストールプロンプトを出す前に必須です。まずマニフェストの icons 配列を確認してください。
PWA アイコンは iOS のホーム画面をカバーしますか？
いいえ。iOS はホーム画面にマニフェストの icons を無視し、代わりに apple-touch-icon を使うので、そのファイルも必要です。