Maskable Icon Generator
This maskable icon generator converts any logo into an Android adaptive icon with the correct safe-zone padding, so your Progressive Web App icon is never clipped on a user's home screen. Upload an image, watch the live circle, squircle and rounded-square mask previews, then export full-bleed maskable PNGs at 512 and 192. It runs entirely in your browser using the canvas API — nothing is uploaded.
What "maskable" actually means
When you install a PWA on Android, the launcher does not show your icon as-is. It applies an adaptive-icon mask — a circle on stock Android, a squircle on some Samsung devices, a rounded square or a teardrop on others — and the device chooses the shape. A normal icon that fills the whole 512×512 canvas loses its corners and often part of the logo. A maskable icon is drawn so the important content lives inside a central safe zone and the surrounding area is just background, guaranteeing the logo survives whatever shape the OS applies.
The 80% safe zone rule
The maskable-icon spec defines a safe zone as a circle whose diameter is 80% of the icon's width, centered in the canvas. On a 512×512 icon that is a 409px circle with roughly 51px of bleed on every side. Everything inside the circle is guaranteed to be visible after masking; everything outside may be cropped. This tool draws that circle as a dashed overlay on the first preview and lets you increase padding with a slider until your logo sits comfortably inside it. A padding of 18–22% is a good starting point for most logos.
Why maskable icons must be opaque
Because the icon is composited onto a launcher and then masked, transparent edges produce ugly gaps or show the wallpaper through your icon. Maskable icons should therefore be fully opaque. This generator fills any transparency with a background color of your choice (default a brand blue) so the exported PNG looks correct under every mask. If you insist on transparency you can toggle it on, but it is not recommended for the maskable purpose.
How to use the exported icons
Export the 512 and 192 PNGs, drop them in your site, and add a dedicated maskable entry to your web app manifest alongside your normal icons:
{ "src": "/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
Keep your existing purpose: "any" icons too — browsers pick the maskable one for adaptive launchers and fall back to the others elsewhere. Our web manifest generator can write both entries for you, our favicon generator produces the underlying icon set, and our Apple Touch Icon generator covers the iOS side, which does not use maskable icons at all.
Maskable icon vs a regular favicon
A favicon shows in a browser tab and is usually a small square shown exactly as supplied. A maskable icon is specifically for installed apps where the platform reshapes it. You generally want both: a crisp favicon and Apple Touch Icon for browsers, plus a padded maskable icon for the Android home screen. Generating all of them keeps your branding sharp everywhere your site appears.
maskable icon generator maskable icon android adaptive icon maskable png safe zone purpose maskable pwa maskable icon adaptive icon maker icon mask preview progressive web app icon
© 2026 hjLabs.in · Built on Cloudflare Workers