W3C safe-zone calibration

Maskable Icon Generator for PWAs

Tune the safe zone before a launcher crops your PWA icon.

Place your artwork on an opaque, full-bleed background, inspect the guaranteed 80% diameter circle, and export dedicated 192×192 and 512×512 maskable PNGs. Crop shapes are previews only—your downloaded files stay square.

80% circular safe zone5 crop previewsLocal browser processing192 + 512 PNG

Maskable calibration bench / local sessionWaiting for artwork

Upload Your Logo or Icon Artwork

Use a centered logo or symbol. Transparent sources work well because the selected full-bleed color becomes the final opaque background.

PNG · JPG · WEBP · SVG / MAX 20 MB / 512 PX RECOMMENDED

The geometry that matters

Maskable Icon Safe Zone: An 80%-Diameter Circle

The Web App Manifest specification defines the guaranteed visible area as a circle centered on the icon, with a radius equal to 40% of its smaller dimension. Pixels inside that circle must remain visible under any user-agent mask; pixels outside it may be cropped.

Ten percent of edge space describes the circle's outer bounds, but it does not automatically make every corner of an 80% square safe. Use the overlay to judge the actual artwork.

min(width, height)

Radius of the shorter side: 40%
Guaranteed circle diameter: 80%
Circle-to-edge distance: 10%

How to Create a Maskable Icon for Your PWA

Three focused steps produce a dedicated maskable companion to your regular PWA icons.

01
Upload Your Source Logo or Icon
Choose PNG, JPG, WebP, or SVG artwork. The browser reads it locally; no image is sent to LogoFoundry.
02
Adjust Scale, Padding, and the Safe Zone
Adjust scale, padding, and an opaque background, then inspect circle, squircle, rounded-square, square, and teardrop previews.
03
Export PNGs and Update the Web App Manifest
Download the two PNG files and merge the generated icons array into your existing manifest.webmanifest file.

Maskable Icons vs Full PWA Icon Sets and Android Adaptive Icons

These formats solve adjacent problems, but their package structures and runtime behavior are different.

Scope	This generator	Full PWA generator	Native Android adaptive
Primary output	2 opaque maskable PNGs	Icons, manifest, favicon, splash, service worker	Foreground, background, optional monochrome layers
Configuration	Manifest icons snippet	Complete manifest and install files	Android XML resources
Crop behavior	Browser or OS applies the mask	Includes maskable and regular any icons	Android launcher composes layers
Best for	Safe-zone tuning of existing artwork	Building a complete installable PWA asset set	Shipping a native Android application

Need regular any icons, favicons, a complete manifest, iOS splash screens, and install files as well? Use the full PWA Icon Generator instead.

Open PWA Generator

A deliberately small package

Download 192×192 and 512×512 Maskable Icon PNGs

The ZIP contains only the files this task needs, with paths that match the JSON exactly.

192×192 Maskable Icon PNG

icons/maskable-icon-192x192.png

A common smaller PWA installation icon, rendered on the selected opaque background.

512×512 Maskable Icon PNG

icons/maskable-icon-512x512.png

The high-resolution maskable icon commonly used by Chromium-based PWA installation flows.

Web App Manifest JSON Snippet

manifest-snippet.json

An icons array with matching src, sizes, type, and purpose values. Merge it into your own manifest.

manifest-snippet.json

{
  "icons": [
    {
      "src": "/icons/maskable-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/icons/maskable-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Keep separate regular icons with purpose "any". This focused snippet marks the generated files only as "maskable" so their safety padding is not reused in every icon context.

Maskable Icon FAQ

Practical guidance for safe zones, opaque backgrounds, manifest setup, and device testing.

What is a maskable icon?

A maskable icon is a Web App Manifest image designed so a browser or operating system can crop it into a platform-preferred shape. It uses the manifest purpose value maskable and keeps essential artwork inside the standardized center safe zone.

What exactly is the 80% maskable icon safe zone?

It is a circle centered on the icon with a diameter equal to 80% of the icon's smaller dimension, or a 40% radius. Pixels in that circle are guaranteed to remain visible. It is not an 80% square, so square corners at that width can still sit outside the safe circle.

Does 10% padding guarantee that my logo is safe?

No. Ten percent is the distance from each canvas edge to the outer edge of the 80% diameter circle. A wide or square artwork can still cross the circle near its corners. Inspect the dashed circular overlay and every preview shape before exporting.

Can a maskable icon have a transparent background?

The specification allows a user agent to composite transparent pixels onto a solid color of its own choice and recommends avoiding transparency. This generator therefore places the source on your selected opaque, full-bleed background for predictable results.

Should I round the corners before exporting?

No. Export a complete square image with a full-bleed background. The browser or operating system applies its own circle, squircle, rounded-square, or other mask. The shapes in this tool are previews and are never baked into the PNG.

Why does this tool generate 192×192 and 512×512 files?

Those are a widely used smaller and larger pair in Chromium-based PWA installation guidance. They are practical browser-facing sizes, not dimensions mandated by the W3C maskable icon specification.

Should one icon use purpose "any maskable"?

A manifest can technically contain multiple purpose tokens, but dedicated files are usually clearer. A maskable icon includes safety spacing that can make it look unnecessarily small in regular contexts, so this tool outputs purpose maskable and leaves ordinary any icons to your PWA set.

Is this the same as a native Android adaptive icon?

No. A web maskable icon is one square image referenced by a Web App Manifest. A native Android adaptive icon is composed from separate foreground and background layers, may add a monochrome layer, and is configured with Android resources.

How can I test the exported icon in Chrome?

Add the files and snippet to your PWA, open Chrome DevTools, then use Application → Manifest → Icons. Chrome can show only the minimum safe area so you can inspect the installed manifest result in addition to the previews here.

Is my image uploaded to a server?

No. Reading, previewing, resizing, PNG encoding, and ZIP packaging all run locally in your browser. LogoFoundry does not receive or store the artwork you choose.