PWAアイコンのサイズとセーフエリア完全ガイド

まず押さえるポイント

PWAのmanifest.jsonには、少なくとも192×192と512×512のPNGを登録します。Android向けには512×512のマスカブルアイコンも追加し、重要な要素を中央80%のセーフエリアへ収めてください。

purpose: "any maskable"で一つの画像を兼用せず、通常表示用とマスカブル用を分けます。通常版はキャンバスを広く使えますが、マスカブル版には端まで続く不透明な背景と切り抜き用の余白が必要です。

推奨サイズ一覧

実用的な最小構成: 通常版192×192、通常版512×512、マスカブル版512×512の3点です。

anyとmaskableの違い

purpose: "any"

• 画像は基本的に作成時の見た目で使われます。
• 透明部分を保持できます。
• キャンバスを広く使ったデザインに向いています。
• マスカブル版がない環境での代替にもなります。

purpose: "maskable"

• ランチャー側が指定の形状へ切り抜きます。
• 背景を画像の端まで不透明にする必要があります。
• ロゴ、文字、重要な細部はセーフエリア内へ収めます。
• 円形、スクワークル、角丸四角形など、端末ごとに異なる形で表示されます。

any maskableを避ける理由

マスカブル画像には切り抜き用の余白があります。同じファイルを通常アイコンとして表示すると、その余白まで残ってロゴが周囲より小さく見えます。そのため、web.devでも別々のエントリが推奨されています。

80%のセーフエリア

仕様上の最小セーフエリアは、画像中央にある半径が画像幅の40%に相当する円です。実際にデザインするときは、重要な内容を中央80%へ収め、四辺に約10%ずつ余白を取ると分かりやすくなります。

画像全体:             512 × 512 px
中央80%の範囲:        約410 × 410 px
四辺の余白:           約51 px
保証される円形領域:   半径205 px

• セーフエリア内: ロゴ、文字、識別に必要な細部。
• 外側の領域: 背景、または切れても問題のない装飾。

ランチャーの形状プレビューは確認用です。書き出すPNGは正方形のままで、最終的なマスクはOSが適用します。

manifest.jsonの設定例

{
  "name": "Your PWA Name",
  "short_name": "YourPWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "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/maskable-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/icons/maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

HTMLからmanifestを参照します。

<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#000000">

アイコンのパスはmanifestのURLを基準に解決されます。それぞれのURLをブラウザで直接開き、404にならないことも確認してください。

マスカブル版の作り方

1. 512×512の正方形キャンバスを用意する。
2. 端まで不透明な背景色で塗る。
3. シンボルを中央80%のセーフエリアへ収める。
4. 小さな文字や細い線を避ける。
5. 円形、スクワークル、角丸四角形、しずく形で確認する。
6. PNGで書き出し、端まで不透明になっているか確認する。

元画像に透明部分があっても、書き出す前に不透明な背景へ合成すればマスカブル版として使えます。

確認方法

Chrome DevTools

1. ChromeでPWAを開く。
2. DevTools → Application → Manifestへ移動する。
3. 認識されたアイコンと読み込み先を確認する。
4. マスカブルアイコンの最小セーフエリアを表示する。
5. ロゴや文字が欠けていないか確認する。

実機テスト

複数の端末またはランチャーへインストールし、円形とスクワークル・角丸四角形の両方で見比べます。色、マスク、視覚効果の一部は端末側で決まります。

よくあるエラー

マスカブルアイコンがないと表示される

原因: purpose: "maskable"のエントリがありません。

対処: 独立したエントリを追加します。manifestの検証では画像の見た目まで確認されないため、追加後にセーフエリアも確認してください。

インストールしてもアイコンが表示されない

次の順に調べます。

1. HTMLに<link rel="manifest">があるか。
2. manifestをエラーなく開けるか。
3. 各アイコンのURLが画像を返すか。
4. sizes、type、purposeが実ファイルと一致するか。
5. 古いインストールを削除してから再テストしたか。

白または灰色の背景が出る

原因: マスカブル画像に透明なピクセルが残っています。

対処: ブランドに合う不透明な背景で書き出し直します。通常のany画像は透明のままでも構いません。

ロゴがほかのアプリより小さい

原因: セーフエリア用の余白がある画像をanyにも使っています。

対処: 通常版とマスカブル版を別ファイルにします。

プラットフォーム別の注意点

Android

対応ランチャーはマスカブル版へ独自の形状を適用します。端末、ランチャー、壁紙、テーマによって最終表示が変わる場合があります。

iOS

Safariは、指定されている場合にapple-touch-iconを使います。安定した表示のため、180×180のPNGも用意してください。

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Apple Touch Iconとマスカブルアイコンでは要件が異なります。一つの画像だけで両方を最適化できるとは限りません。

Windows・macOS

Windowsではショートカットやタスクバーに通常版のanyが使われます。現行macOSは、利用できる場合にマスカブル版を使い、なければanyへフォールバックすることがあります。

最終チェックリスト

• 通常版PNGの192×192と512×512
• 不透明な背景を持つ512×512のマスカブル版
• 重要な内容がセーフエリア内にある
• anyとmaskableが別エントリになっている
• すべてのURLが404にならない
• HTMLのheadからmanifestを参照している
• DevToolsと実機の両方で確認した

関連ツール

• PWAアイコン作成ツール — 必要サイズ、manifest、マスカブル版をまとめて作成し、セーフエリアも確認できます。
• マスカブルアイコン作成ツール — 背景、サイズ、ランチャーの切り抜きを細かく調整できます。
• アプリアイコン作成ツール — 同じ画像からiOS・Android向けパッケージを書き出せます。