App launchers can display icons as circles, rounded squares, or other shapes. A normal square image may be clipped or reduced inside a white frame. A maskable icon tells the platform that the artwork has been prepared for masking.
Protect the important content
The guaranteed safe zone is a centered circle whose diameter is 80% of the icon’s width. Keep essential parts of your logo inside that circle. The surrounding background should fill the entire square, because the launcher decides which outer areas to hide.
Use a separate opaque background
A maskable icon should have an opaque background. Simply changing a normal transparent icon’s manifest purpose to maskable does not fix the artwork. You must prepare the image itself with enough room around the important content.
What this generator does
The complete pack includes separate 192 and 512 px maskable PNGs. It places a smaller copy of the finished icon on an opaque background, using conservative padding so the source square sits inside the circular safe zone. This can leave more space than a hand-tuned design, but helps avoid clipped corners.
Declare the purpose in the manifest
{
"src": "/maskable-icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}Keep a normal icon entry with purpose any as well. Different contexts can choose the appropriate image. The sample manifest in the ZIP contains both types; replace the placeholder app name and review the paths for your deployment.
Test on your target platforms
Inspect actual installed-app appearances on the devices you support. If the logo feels too small, prepare a dedicated maskable design that uses more of the safe circle while still protecting its critical details. The pack is a useful starting point, not a substitute for platform testing.
Reference: MDN: define app icons and masking.