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

まず押さえるポイント

PWA Icon Generatorは192px・512pxのPNGとmanifestを出力します。これはツールの手順で使う基本サイズです。Manifest仕様がすべての環境でこの2枚を必須にしているわけではありません。アイコンだけでPWA全体が完成するわけでもなく、インストールにはページの条件とブラウザのバージョンも関係します。

推奨サイズ一覧

Chromeのインストール促進条件には192px・512px、HTTPS、ページとmanifestの条件が含まれます。これはブラウザの手順であり、manifest仕様による一律の最小要件ではありません。手動インストールは条件が異なる場合があります。元画像が大きくても、小さい表示で細部が読めるとは限りません。

anyとmaskableの違い

anyはマスクなしで使う通常の図稿、maskableはランチャーの切り抜きに備えた図稿です。後者では背景を決め、重要な部分を安全な円の中へ配置します。透明なロゴを端まで広げただけでは、両方の用途に対応したことにはなりません。

purpose: "any"

マスクなしで使う通常の図稿です。透明度はデザインと用途に合わせて選び、一律の必須条件にしません。

purpose: "maskable"

ランチャーの切り抜き用に、背景を決めて重要部分を安全な円内へ配置した図稿です。

any maskableを避ける理由

元の見出しは図稿の使い分けを扱うもので、構文上の禁止ではありません。有効な構文です。同じ図稿がマスクあり・なしで使える場合に指定します。別画像は余白を調整する設計上の推奨で、構文上の禁止ではありません。

80%のセーフエリア

512pxの正方形では、安全な円の中心は (256, 256)、半径は 204.8px、直径は409.6pxです。410pxの安全な正方形ではありません。幅409.6pxの正方形の角は中心から約289.6px離れ、安全な半径の外にあります。

正方形の図形なら、中央に配置した約289px幅の形が円に収まります。これは四角い図形の保守的な計算例で、すべての形を同じ幅に縮小する規則ではありません。文字や角、突き出した部分を円形オーバーレイで確認してください。

80%は円の直径で、正方形の角を保証する数字ではありません。仕様を参照してください。

manifest.jsonの設定例

以下ではmaskableファイルを /icons/ に置き、通常用PNG2枚を別に作成したと仮定しています。各URLを実際のファイルに合わせてください。

{
  "name": "Example app",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "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-icon-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/icons/maskable-icon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

<link rel="manifest" href="/site.webmanifest">

Manifestの構文では purpose: "any maskable" も使えます。画像を分けるのは、余白のあるmaskable画像をマスクなしで使うと小さく見えるための設計上の提案で、構文上の禁止ではありません。

マスカブル版の作り方

元のSVGをダウンロードし、Maskable Icon Generatorで余白を 25%、倍率を 100%、背景を #ffffff に設定します。図形の幅はキャンバスの半分となり、安全な円に入ります。実際に出力したZIPと比較できます。

PNG自体を丸く切り抜かず、ランチャーに形状の適用を任せてください。不透明背景を使うと、透明部分に予期しない色が付くのを避けやすくなります。

確認方法

公開したファイルを先に確認し、タブのfaviconとインストール後のアイコンを分けて検証します。

Chrome DevTools

公開ページをChromeで開き、Application → ManifestでURL、読み込んだ画像、サイズ、実際のエラーを確認します。利用できる場合はmaskableの安全領域プレビューも有効にしてください。DevToolsのPWAガイドを参照できます。古いLighthouseの警告名だけに頼らず、ブラウザのバージョンも記録します。

実機テスト

対象端末へインストールし、通常表示と切り抜き表示を別々に確認してください。タブのfaviconは別の確認です。削除して再インストールする場合は、先にローカルデータとログイン状態への影響を確認します。再インストールは診断方法で、一般ユーザー向けの更新手順とは限りません。

よくあるエラー

診断文、ブラウザのバージョン、公開URLを記録してから図稿を調整します。

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

診断文とブラウザのバージョンを確認します。purpose maskable、実画像、安全な円内の図稿を検証してください。Lighthouseの特定監査が全バージョンにあるとは限りません。

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

起動ページのmanifest、画像URL、サイズ、サブパス、転送、認証を確認し、その後にインストール条件とキャッシュ・既存アプリの状態を調べます。

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

透明部分と選択されたpurposeを確認します。Maskable版の背景を決め、実際のランチャーで切り抜きを確認してください。

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

余白のあるmaskable版を通常表示にも使っていないか確認します。必要なら通常版は大きく、maskable版は安全領域を確保して別に用意します。

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

対象ブラウザと実際のインストール手順を検証します。

Android

複数の模擬形状と実際のランチャーで確認します。PWAのmanifestは、前景・背景を分けるAndroidネイティブ素材パッケージとは異なります。アプリ用はAndroidガイドをご覧ください。

iOS

対応するiOSでWebサイトのホーム画面アイコンを確認します。apple-touch-iconは別の指定方法で、Appleのアーカイブ版Web Clipガイドに説明があります。Apple Touchツールは180pxの不透明PNGを用意します。PWAのmaskable規則をネイティブiOS素材の要件として適用しないでください。

Windows・macOS

対象ブラウザでインストールし、デスクトップ・タスクバー・Dockを確認します。Androidと同じ切り抜きになるとは限りません。Manifestのアイコンを使うために、古い msapplication-* のタイル指定をすべてのサイトへ追加する必要はありません。

最終チェックリスト

編集用の元画像を保管し、最小サイズ、全URL、円形オーバーレイ、実機インストールを確認します。通常版とmaskable版を分け、manifestと画像を同時に公開してください。これらは実装確認の手順であり、全環境のインストールや表示を保証するものではありません。

PWAアイコンにはどのサイズが必要ですか？

本手順では192×192・512×512のPNGから始めます。Chromeのインストール促進条件には両方が含まれますが、manifest仕様が全インストールに一律で要求するわけではありません。必要に応じてmaskable版を別に用意します。

192×192と512×512の両方が必要ですか？

両方を残すのは実用的な基本構成です。ブラウザや手動インストールの条件は異なり、画像だけでインストール可能なPWAが完成するわけではありません。

マスカブルアイコンのセーフエリアとは何ですか？

安全領域は短辺の40%を半径とする中心の円です。80%は直径を指し、正方形の角まで安全という意味ではありません。円形オーバーレイで確認してください。

manifestでpurpose: "any maskable"を使ってもよいですか？

有効な構文です。同じ図稿がマスクあり・なしで使える場合に指定します。別画像は余白を調整する設計上の推奨で、構文上の禁止ではありません。

Android版ChromeでPWAアイコンが表示されないのはなぜですか？

起動ページのmanifest、画像URL、サイズ、サブパス、転送、認証を確認し、その後にインストール条件とキャッシュ・既存アプリの状態を調べます。

マスカブルアイコンがないという警告を解消するには？

診断文とブラウザのバージョンを確認します。purpose maskable、実画像、安全な円内の図稿を検証してください。Lighthouseの特定監査が全バージョンにあるとは限りません。

PWAアイコンにSVGを使えますか？

ブラウザと表示場所によります。ラスターが必要な対象にはPNGを残し、実際のインストール経路でSVGを確認します。ページ内表示だけではランチャー対応は判断できません。

アイコンのファイルサイズはどの程度が目安ですか？

輪郭や文字を失わない範囲で小さくし、対象回線で配信を計測します。全アイコン共通の100 KB上限はなく、減色処理は可逆圧縮とは異なります。

PWAアイコンに透明部分があってもよいですか？

通常版の透明度は図稿に応じて選びます。Maskable版では意図した不透明背景を用意し、切り抜き後の予期しない塗りつぶしを避けます。

マスカブルアイコンはどうやって確認できますか？

利用できる場合はChrome DevToolsのApplication → Manifestで画像と円形領域を確認し、対象端末やランチャーでも試してください。模擬形状だけで全表示は保証できません。

関連ツール

幾何と purpose の意味は Web App Manifest仕様、別画像の用意とDevToolsの確認は web.devのmaskableガイドを参照しています。Androidアプリのアダプティブ素材は別の手順なので、Android Adaptive Iconsをご覧ください。訂正は運営・お問い合わせへお送りください。