PWAのロゴ切れや小さな白枠を防ぐ
インストールしたWebアプリはmanifestのアイコンを使います。ランチャーの形状マスクで見え方が変わります。
アプリ素材を用意する
192×192、512×512のPNGを出発点に、対象環境を確認します。相対パスはmanifestのURL基準です。IcoJetの最大256pxでは512pxのPNGを代用できません。
maskable版を設計する
重要部分を中央の円内に収めます。円の半径は画像幅の40%です。背景は端まで広げ、確認済みの素材だけにpurpose="maskable"を指定します。
インストール結果を確認する
ブラウザーでmanifestとマスクを確認し、対象端末にインストールします。通常版とmaskable版を両方検査。旧インストールの問題は新規テストと比較してから原稿を修正します。
{
"icons": [
{
"src": "/icons/app-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/app-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/app-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}