Android · PWA · purpose: maskable
Maskable icon editor
Android cuts app icons into circles, squircles and other shapes. Keep your artwork inside the safe zone, the central circle 80% of the icon wide, and nothing important gets cut off.
1Artwork
Drag to move, pinch or press + / − to zoom. Drop or paste a new image anywhere on the square.
PNG, JPEG, WebP, GIF, AVIF, SVG or ICO. Drop it on the square, or paste it.
2Maskable icon
Fitted to the safe zone.
How launchers cut itmasks
Full bleed Circle Squircle Rounded square Teardrop Safe zone only
Export
Add to your manifest's icons
{ "src": "/icon-512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" },
{ "src": "/icon-192-maskable.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" }How it works
A maskable icon fills its whole square with colour, and the launcher decides the outline. The spec promises that a centred circle with a radius of 40% of the icon is always visible, so that is where your logo belongs.
- Keep fitted measures the visible pixels of your artwork and scales it until the farthest one touches the safe circle, so transparent margins in your image do not waste space.
- Artwork size lets you go smaller for breathing room, or larger if you accept some cropping on circular launchers.
- Background fills the area outside your artwork, so pick your brand colour rather than leaving it white.
Keep a separate icon with purpose "any" for places that show the icon uncropped.
Questions
What happens without a maskable icon?
Android shrinks your regular icon and places it on a white or coloured plate inside its own shape, which often looks like a small stamp on a white circle.
Why not mark one icon as "any maskable"?
An image padded for the safe zone looks too small where the icon is shown uncropped, and an unpadded one gets cut off when masked. Two separate files look right in both places.
Which sizes do I need?
A 512 × 512 maskable icon is enough for most launchers; a 192 × 192 one saves a download on small screens.