Favicon and PWA guide
Generate regular website icons alongside maskable assets.
Maskable icon safe area explained
Prevent icon clipping on Android launchers by keeping key content inside a safer center area.
Input checklist
- Use a clean PNG or SVG source with clear silhouette.
- Prefer source size 1024×1024 for better 512 output quality.
- Keep logo details simple if it needs to survive different launcher masks.
Practical workflow
- Upload source and switch padding mode to Safe.
- Review maskable preview and check if primary subject stays away from edges.
- Use a stable background color if your logo relies on transparent negative space.
- Export icon-maskable-192x192.png and icon-maskable-512x512.png in ZIP package.
Example setup
Input: Opaque app logo on transparent PNG canvas.
Settings: Safe padding + solid background for maskable compatibility.
Output: Maskable icons remain readable in circle/squircle launcher crops.
Safe-area tips
- Avoid placing text, thin outlines, or important corners near the outer edge.
- Preview the icon against both light and dark launcher backgrounds when possible.
- Keep normal and maskable exports in the same release folder to avoid manifest drift.
FAQ
Why is maskable icon different from normal 512 icon?
Maskable icons may be cropped by launcher masks, so they need extra safe-area space.
Should I use transparent or solid background?
Solid background is usually more stable for maskable launcher rendering.
How can I tell content is too close to edge?
If major text or logo touches preview boundary, switch to Safe mode and recheck.
Related icon scenarios
SVG to icon pack guide
Start from SVG and export complete icon files in one pass.