PWA manifest.jsonアイコン仕様の書き方——icon-192/512.pngとpurpose:maskableの違い

Web App Manifest（manifest.json）は、PWAの設定情報をブラウザに伝えるためのJSONファイルです。中でもicons配列は、ホーム画面追加時のアプリアイコンを定義する重要な項目。MDN Web App Manifest iconsリファレンスに基づいて、書き方と落とし穴を整理します。

icons配列の最小構成

MDN Web App Manifest仕様によれば、icons配列の各要素はsrc（必須）、sizes（推奨）、type（推奨）、purpose（オプション）の4つで構成されます。最小構成は次のとおりです：

{
  "name": "サイト名",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

192pxと512pxの2サイズが事実上の業界標準です。192pxはAndroid Chromeのホーム画面追加時のアイコン、512pxはスプラッシュ画面（PWA起動時のロード画面）でフルスクリーン表示されます。

sizes属性の書き方

sizesは幅x高さの形式で書きます（例：192x192）。SVGなど解像度非依存の画像ではanyを指定できます。複数解像度を1つのファイルにまとめている場合は16x16 32x32 48x48のようにスペース区切りで列挙します。

MDNの仕様では、sizesに書く値とファイルの実サイズが一致しない場合の挙動はブラウザ依存です。多くのChromiumブラウザはsizes属性をヒントとして使い、実ファイルの解像度を優先します。FirefoxやSafariはsizesを信頼する傾向があるので、両方を一致させるのが安全です。

purpose: anyとpurpose: maskableの違い

purpose属性は、アイコンの使い方をブラウザに伝えます。MDN仕様で定義されている値はany（任意、デフォルト）、maskable（OSのマスク領域内に収まることを保証）、monochrome（単色マスク用）の3つ。複数指定する場合はスペース区切りです（例：any maskable）。

maskableは重要です。Android 8（Oreo）以降、ホーム画面アイコンはOSが定めるマスク形状（円形・正方形・スクワーカル等、端末メーカーによる）で切り抜かれます。512×512pxのアイコン全体を埋めて作ると、四隅が切り落とされて中身が削られる事故が起きます。

maskable対応のアイコンは「セーフゾーン」を意識して作ります。MDN/W3Cの推奨に従うと、512×512pxのアイコンに対して、中央410×410px円形内に主要ビジュアルを収めれば、どんなマスク形状でも切り落とされません。残りの周囲51pxは「背景余白」として、単色か模様を入れます。

anyとmaskableを別ファイルで指定する書き方

現場でよく使う書き方は、any用とmaskable用で別ファイルを用意する方式です：

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

こうすれば、any用のアイコンはタイル状アプリアイコン（マスクなし）として、maskable用のアイコンはOSマスク内アイコンとして使い分けられます。手軽屋のファビコン作成は基本のicon-192.pngとicon-512.pngを出力します。maskable用は別途、背景余白を含めた図形を用意してください。

monochromeとmodeアイコン

purpose: monochromeは単色マスク用のアイコンです。ステータスバーやAndroidのNotification Channel等で「色を抑えた小さなアイコン」が必要な時に使われます。実用上、PWAでmonochromeを必須にしているブラウザは限定的なので、対応必要な場合のみ追加してください。

HTMLでmanifest.jsonを読み込む

manifest.jsonを書いただけでは適用されません。HTMLの<head>に次のlinkタグを追加します：

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

PWAをフル対応にするには、manifest.json単体ではなく、Service Worker（オフライン動作）、HTTPS配信（必須）も必要です。最小のPWAでもService Workerの登録は省略不可です。

ファビコン作成ツール → /favicon/

本記事はMDN Web App Manifest icons（2026-04-12更新）、Web App Manifest W3C仕様、HTML Living Standard rel=manifest仕様を参照しています。