Androidのホーム画面にPWAをインストールしたのに、ロゴがぼやけて引き伸ばされたような残念な表示になってしまった経験はありませんか？ その原因の多くは、Web App Manifestのアイコン設定（192pxと512px）の不備にあります。Androidはアイコン選択を適当にやってくれるわけではなく、manifest.jsonに記述された情報を厳密に読み取り、最適なものをピックアップしています。サイズや余白の設定を間違えると、期待外れの結果になってしまうのです。

GoogleのLighthouse監査でも、manifest内に192x192と512x512のPNGアイコンが見つからないとPWAの評価が容赦なく失敗になります。これらはただの適当な数字ではありません。192pxのアイコンはホーム画面のショートカットに使われる標準サイズで、512pxのアイコンはAndroidがスプラッシュスクリーンを生成する際に使用されます。どちらも必須であり、かつ完璧に仕上げる必要があります。

本記事ではPWAの全体的なエコシステムについては触れません。そちらが必要な方はWeb App Manifest Favicon Guideを参照してください。ここでは192pxと512pxのアイコンに絞り、なぜ表示が崩れるのか、正しい生成方法、そして確実に機能させるためのJSONの設定について解説します。

前提条件：ソース画像の準備

リサイズ作業に入る前に、高品質なソースファイルを用意しましょう。16x16のfaviconから無理やり拡大するようなことは絶対に避けてください。必要なのは、ベクター形式のSVGソースファイル、または少なくとも1024x1024ピクセル以上のPNG画像です。

ラスター画像のロゴしか手元にない場合、512pxまで拡大するとぼやけてしまうのがわかるはずです。だからこそ、SVGから作業することがプロの標準スタイルとなります。SVGなら解像度を気にせず無限にスケールでき、1ピクセルの解像度も失いません。もしロゴに細かいテキストが含まれていると、小さいフォーマットに縮小した際に悲惨なことになります。小さなサイズでも機能するシンプルなマークの重要性については、Favicon Design Tipsを参考にしてみてください。

ステップバイステップ：アイコンの生成と設定

実際の実装手順を見ていきましょう。画像編集ソフトなら何でも使えますが、ここではビルドパイプラインに組み込みやすいよう、標準的なCLIツールとプレーンなJSON設定を使用します。

Step 1: 192pxと512pxのPNGを書き出す

お好みのエディタ（Figma、Sketch、Adobe XDなど）でソースのSVGを開きます。そして、2つの異なるPNGファイルとして書き出します。ファイル名は正確にicon-192.pngとicon-512.pngとしてください。命名規則を守ることで、manifestが読みやすく、デバッグも容易になります。

ViteやWebpackなどのビルドツールを使っているなら、プラグインでこの作業を自動化できます。しかし、シンプルな静的サイトであれば、/public/icons/ディレクトリにそのままドロップするだけで完璧に動作します。

Step 2: ManifestのJSONを記述する

次に、manifest.jsonファイルを開きます。icons配列の中に、両方のアイコンを明示的に宣言する必要があります。以下がそのまま使える正確な設定です：

{
  "name": "My Awesome App",
  "short_name": "Awesome",
  "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"
    }
  ]
}

purposeフィールドに注目してください。anyに設定することで、ブラウザに対してこのアイコンがどこでも使えることを伝えます。ほとんどの開発者がつまずくmaskable iconsについては、後述の落とし穴セクションで解説します。

Step 3: HTMLからManifestを読み込む

manifestファイルは、ブラウザに存在を知らせなければ何の役にも立ちません。HTMLドキュメントの<head>内に、以下の1行を追加してください：

<link rel='manifest' href='/manifest.json'>

これだけです。デプロイ後、Androidデバイスはこのファイルを読み込み、自動的に正しい192pxと512pxのアイコンを取得してくれます。

192pxと512pxアイコン設定のよくある落とし穴

JSONを正しく書いただけでは、戦いは半分終わったにすぎません。多くの開発者がLighthouseのPWA監査に失敗するのは、デザインや設定の微妙なミスが原因です。コードレビューでよく見かける3つの問題を紹介します。

落とし穴1：'purpose'のmaskableトラップ

Android 8以降ではAdaptive Iconsが導入されました。アイコンをネイティブのように見せ、様々なランチャーの円形やスクエア形のシェイプにフィットさせるには、maskable iconが必要です。しかし、既存の192pxと512pxのPNGに対して単にpurpose: "maskable"を設定するだけではうまくいきません。

maskable iconsは、全面に背景色を敷き詰め、ロゴをセーフゾーン（キャンバスの内側80%）に配置する必要があります。ロゴが端に触れていると、Androidランチャーが不格好にクロップしてしまいます。余白を考慮して設計された別バージョンを書き出し、次のように宣言する必要があります：

{
  "src": "/icons/maskable-192.png",
  "sizes": "192x192",
  "type": "image/png",
  "purpose": "maskable"
}

purposeが異なれば、manifest内に複数の192x192エントリを持つことができます。192と512の両サイズについて、anyとmaskableを1つずつ持たせることをおすすめします。

落とし穴2：間違ったMIME Typeを配信している

デスクトップでは問題なく表示されるのにモバイルでアイコンが読み込まれない場合、サーバーのヘッダーを確認してください。厳格な設定のWebサーバーでは、PNGをimage/pngではなくapplication/octet-streamとして配信してしまうことがあります。

AndroidのChromeは、manifest内のMIME typeに対して非常に厳格です。JSON内のtypeフィールドとサーバーのContent-Typeヘッダーが一致しない場合、OSは警告なしにアイコンを拒否します。NginxやApacheの設定で、.pngファイルが正しくマッピングされているか確認しましょう。

落とし穴3：512pxアイコンに細部を詰め込みすぎる

512x512のキャンバスがあるからといって、会社のミッションステートメントを全部詰め込むべきではありません。Androidがその512pxアイコンを通知や小さなショートカット用に縮小表示するとき、細部はすべて泥のように潰れてしまいます。

LINEやPayPayのような大手のPWAアイコンを見てみてください。彼らは単純でコントラストの高いマークを単色の背景に配置しています。これにより、スプラッシュスクリーンで512pxで表示されても、通知バーで48pxに縮小されても、完璧にシャープに見えます。シンプルに保つことが重要です。

設定の検証

デプロイして祈るようなことはやめましょう。manifestのアイコンが正しく機能しているか検証する必要があります。Chrome DevToolsを開き、Applicationタブに移動して、Manifestをクリックしてください。'Icons'セクションの下に、192pxと512pxのアイコンが明確にレンダリングされているはずです。

そこで壊れた画像アイコンなしで表示されていれば、設定は成功しています。他のサイトがどのように余白を設定しているか確認するために、192pxや512pxのアイコンを手早く取得したい場合は、Mzu favicondlを使ってmanifestファイルを直接取得し、設定を比較してみるのがおすすめです。

正しいソースファイルさえあれば、Web App Manifestの192pxと512pxアイコンの設定は約10分で完了します。推測に頼らず、正確なサイズを書き出し、正しいMIME typeを宣言すれば、あなたのPWAはすべてのAndroidデバイスでネイティブアプリのように美しく表示されるでしょう。