PWAをスマホにインストールした後、ホーム画面に表示されたアイコンがピクセルだらけでボヤけていたら、それは site webmanifest の icon sizes 設定に問題がある可能性が高いです。Androidは単に一番大きい画像を縮小して表示してくれるわけではありません。manifest.json に宣言された内容に基づいて、積極的にクロップ、スケーリング、マスク処理を行います。

私がこれを痛感したのは、自作アプリをPixelで見たときはくっきり綺麗だったのに、Xperiaで確認したら小さくて中心からずれた謎の画像になっていた時でした。原因は画像の解像度ではなく、manifest の設定にありました。

manifest ファイル自体の基礎知識については、favicon site.webmanifest の開発者ガイドを参照してください。本記事では、icons 配列と、宣言すべき正確なサイズについてのみ深く掘り下げます。

前提条件

高解像度のソース画像（最低512x512ピクセル）とテキストエディタを用意してください。ソースファイルがない場合は、Mzu favicondl を使って既存のロゴや画像から生成できます。

ステップバイステップ：Manifest Icons の設定

堅牢な icons 配列を構築しましょう。現代のAndroidとPWAサポートにおいて、実際に重要な3つのエントリに焦点を当てます。

1. 192x192 標準 PNG

これがベースラインです。Androidはほとんどの標準的なディスプレイで、アプリランチャーのアイコンとしてこのサイズを使用します。これを明示的に宣言する必要があります。

ブラウザが512x512の画像をダウンスケールしてくれることを期待してはいけません。Androidのレンダリングエンジンは、スケールダウン時に奇妙な補間を適用することがあり、アイコンが本来よりもぼやけて見えることがあります。専用の192x192 PNGを用意しましょう。

2. 512x512 高解像度 PNG

これはスプラッシュ画面のアイコンです。PWAが起動すると、Service Workerが起動するまでの間、Androidはこの画像を白い背景の上に表示します。manifest で1つだけアイコンを宣言するなら、これにすべきです（でも正直に言って、それはやめておきましょう）。

3. Maskable Icon（超重要）

Android 13以降やモダンなChrome OSは、Adaptive Iconsを使用します。maskable icon を宣言しないと、OSは標準アイコンを白い円の中に配置します。見た目が最悪です。

maskable icon には、中央に「セーフゾーン」が必要です。OSが任意の形状（円、スクワークル、角丸四角）にクロップしてもロゴが切り取られないよう、デザインにパディングを設ける必要があります。設計面の詳細については、maskable icon ガイドで解説しています。

完全なコード

今すぐ manifest.json に貼り付けるべき、正確な icons 配列は以下の通りです：

{
  "name": "My Awesome App",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

purpose フィールドに注目してください。これはOSにファイルの使用方法を正確に伝えます。これを省略すると、ブラウザは any とみなします。つまり、maskable icon が標準アイコンとして使用され、不自然なパディングがついたように見えてしまう可能性があります。

よくある落とし穴

正しいコードを書いても、問題は発生します。私がよく目にするミスをいくつか紹介します。

単一の 'any maskable' アイコンを使用する

一部の開発者は、1つのアイコンを "purpose": "any maskable" と宣言してデータ量を節約しようとします。これはやめましょう。maskable icon にはパディングが組み込まれています。ブラウザがその同じファイルを標準的な any リクエストに使用すると、ランチャー内でアイコンが小さく表示されてしまいます。必ず別々のファイルに分けてください。

セーフゾーンを忘れる

美しい512x512アイコンをデザインしました。それを maskable としてアップロードしました。OSがそれを円形にクロップすると、ロゴの半分が消えてしまいます。maskable icon の場合、アートワークをキャンバスの中央80%（セーフゾーン）以内に収める必要があります。

sizes 属性の不一致

実際のファイルが512x512ピクセルなのに、manifest に "sizes": "192x192" と書くと、Androidは混乱します。OSは実際のファイルサイズよりも manifest の宣言を優先します。画像サイズと文字列が一致していることを常に確認してください。

プロのやり方

GitHubがPWAをどのように処理しているか見てみましょう。彼らは15種類もの異なるPNGサイズを配信していません。標準の192と512、そして専用の maskable バージョンを配信しています。これが現代の標準です。DevToolsを開いて manifest を確認すれば、自分で検証できます。

他のサイトがアイコンをどのように処理しているか調査したい場合は、Mzu favicondl を使って manifest 設定をダウンロードして分析できます。圧縮されたHTMLを掘り下げる手間が省けます。

まとめ

何十個ものアイコンファイルを生成するのはやめましょう。site webmanifest の icon sizes 配列に必要なのは、192x192、512x512、そして512x512の maskable バージョンの3つのエントリだけです。コードをクリーンに保ち、セーフゾーンを尊重すれば、PWAはあらゆるデバイスでネイティブアプリのように見えます。