Maskable Icon Generator
Make PWA and Android adaptive icons that survive every mask: your logo stays inside the guaranteed 40% safe zone on an opaque background, with a live circular-mask preview, padding control, and a manifest that declares purpose correctly.
Text renders with your device's system font, so exact pixels can differ slightly between operating systems. The SVG favicon inherits the same behavior.
Drag an image here or browse
PNG, JPEG, WebP, SVG, GIF, AVIF · up to 30 MB / 50 MP · 512px+ source recommended
Android and PWA launchers cut icons into circles and squircles. Only a centered circle with 40% radius is guaranteed to survive every mask, so the maskable variants keep your icon inside that safe zone on its own opaque background.
Previews are illustrative; each operating system renders icons its own way.
Upload an image to see previews and unlock downloads.
Package presetWhy launchers cut your icon
Android gave device makers and users control over icon shape: one phone renders circles, another squircles, another rounded squares. Instead of asking every app for every shape, the platform asks for one over-provisioned image and applies its own mask. The web app manifest adopted the same model with purpose "maskable". The contract is simple but unforgiving: fill the whole canvas, because masked icons show no transparency, and keep everything that matters inside the central safe circle, because everything outside it can be cut on some device. The generator above enforces both halves of that contract and lets you check the result against the dashed safe-zone ring before downloading.
The manifest side matters as much as the pixels: an icon is only treated as maskable when its manifest entry says purpose "maskable". The generated site.webmanifest declares your 192 and 512 pixel icons twice, once as "any" and once as "maskable", which is the shipping pattern that behaves correctly across launchers, browsers and install prompts.
Maskable icon FAQ
What makes an icon "maskable"?
A maskable icon is designed to be cut into any shape the launcher chooses: circle, squircle, rounded square, teardrop. It fills the entire canvas with an opaque background, keeps all important content inside a centered circle with a 40% radius, and is declared in the web app manifest with purpose "maskable". A normal transparent icon shown through a circular mask loses its corners; a maskable one survives every mask by construction.
How big is the safe zone exactly?
The spec guarantees only a centered circle whose radius is 40% of the icon size. For a 512 pixel icon, that is a circle of radius 205 pixels. This generator keeps your logo inside the largest square that fits that circle, about 57% of the icon width, and the padding slider shrinks it further if your mark needs more breathing room. The dashed ring in the preview is that exact 40% circle.
Do I need both maskable and regular icons?
Yes, ship both. Declare 192 and 512 pixel icons with purpose "any" for contexts that show the icon as-is, and separate maskable versions with purpose "maskable" for launchers that cut shapes. Using one icon for both purposes forces a compromise: either wasted padding in normal contexts or clipped content under masks. The PWA preset here generates all four PNGs and a manifest that declares them correctly.
What sizes do maskable icons need to be?
192x192 and 512x512 cover the requirement: 192 is what Android home screens typically render, and 512 is used for install splash screens. Both are generated here from the same composition, so they stay consistent, and both are listed in the generated site.webmanifest with their sizes and purpose.
Why does my icon look cropped on Android?
Because Android applied a mask to an icon that was not designed for one. Adaptive icons on Android cut into shapes chosen by the device maker or the user, and anything outside the safe circle is at risk. If your manifest only offers purpose "any" icons, some launchers will zoom and crop them. Adding proper maskable variants is the fix, and the circular preview above shows the result before you ship it.
Is anything uploaded?
No. Composition, mask preview, PNG encoding and the ZIP package all happen locally in your browser. Your logo never leaves your machine, and file size limits keep even a huge accidental upload from freezing the tab.
More free tools: Favicon Generator · Image Resizer · Image Compressor · Meta Tag Checker