PWA icons: avoid a cropped logo or a tiny white badge
An installed web app may need icons declared in its manifest as well as a favicon. The same picture can be rendered differently when the launcher applies a shape mask.
Prepare app assets beyond the ICO
A practical starting set is separate 192×192 and 512×512 PNG images, then the assets required by your target platforms. Link the manifest from the page and inspect its icons entries. Relative icon paths resolve against the manifest URL, so moving the manifest can break them. IcoJet’s maximum 256px output does not replace a 512px PNG.
Design a genuinely maskable version
Keep essential artwork inside the centered circle whose radius is 40% of the image width. Extend the intended background to the edges; content outside the safe area may be cropped. Use purpose="maskable" only for artwork designed and checked for masking. Relabeling an ordinary tightly cropped logo will not protect its corners.
Validate the installed result
Use the browser’s manifest inspection and mask preview, then install on a target device. Check both the ordinary and maskable variants, and confirm that the manifest references the current files. If an old installed app still looks wrong, compare it with a fresh test installation before altering the original artwork again.
{
"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"
}
]
}