PNG to Maskable Icon — Safe Zone & Padding
Maskable icons are designed to be cropped into different shapes by the operating system — circles on some Android launchers, squircles on others. The key is keeping all critical content within the center "safe zone" so nothing important gets cut off. This guide explains how to convert a standard PNG into a proper maskable icon.
Output Sizes
| Size | Format | Purpose |
|---|---|---|
| 512x512 | PNG | Maskable PWA icon |
| 192x192 | PNG | Maskable home screen icon |
| 108x108 | PNG | Android adaptive foreground |
| 432x432 | PNG | Android adaptive foreground @xxxhdpi |
Conversion Details
Input
PNG
Output
PNG (maskable)
Best Practices
- 1Keep all meaningful content within the center 80% of the icon (the "safe zone").
- 2Use a solid background color that fills the entire canvas — transparent maskable icons look broken.
- 3Provide separate icons for "any" and "maskable" purposes in your manifest.
- 4Test your maskable icon with the Maskable.app editor to visualize how different masks crop it.
Common Mistakes
- Placing logo elements outside the 80% safe zone — they get cropped on devices with circular icon masks.
- Setting purpose to "any maskable" on all icons — this causes standard icons to be treated as maskable, cutting off edges.
- Not testing with different masks — what looks fine as a squircle may crop badly as a circle.
- Using a transparent background for maskable icons — they should have a solid background color that extends to the edges.
Create Maskable Icons Now
Upload your PNG and get properly padded maskable icons for PWA and Android — with safe zone handling built in.
Open GeneratorFrequently Asked Questions
What is a maskable icon?
A maskable icon is designed to be safely cropped into any shape (circle, squircle, rounded square) by the operating system. It has extra padding around the content so nothing important is lost when masked.
What is the maskable icon safe zone?
The safe zone is the center 80% of the icon canvas. Any content outside this area may be cropped when the OS applies its icon mask. Critical visual elements should stay within this zone.
Should all PWA icons be maskable?
No. Provide separate icons: standard icons with purpose "any" for contexts that don't mask, and maskable icons with purpose "maskable" for adaptive display. Don't use "any maskable" on the same icon.