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.

3-step workflow

  1. Upload source and switch padding mode to Safe.
  2. Review maskable preview and check if primary subject stays away from edges.
  3. 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.

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 entries

Back to icon generator

Open workspace and tune safe-area settings directly.

Favicon and PWA guide

Generate regular website icons alongside maskable assets.

SVG to icon pack guide

Start from SVG and export complete icon files in one pass.

Base64 Encode / Decode

Convert image assets to Base64 for debugging or embedding.