Maskable Icons in 2026 — Why Your Android Launcher Icon Looks Cropped (And the 30-Second Fix)

You ship a beautiful 512×512 PNG, link it in your manifest, install your PWA on an Android phone, and the home-screen icon looks off. The corners of your logo are missing. The edges feel uncomfortably tight. On a Samsung the icon sits inside a circle. On a stock Pixel it’s a squircle. On a OnePlus it’s a teardrop. Each one chops a different amount of your artwork.

This is not a bug, and it is not happening because your PNG is wrong. It’s happening because every modern Android launcher applies an adaptive shape mask to PWA icons — and your icon was never designed with that shape in mind. The fix is a one-line manifest change and a single extra PNG, both takes about 30 seconds with the right tool.

What an adaptive shape mask actually is

Android 8 (2017) introduced “adaptive icons” for native apps. The OS, not the app, decides what shape the icon takes — circle, rounded square, squircle, teardrop — based on the device manufacturer and the user’s launcher theme. Native Android apps ship a foreground layer and a background layer; the OS overlays them inside whatever mask shape is current.

Chrome brought the same model to PWAs in 2019 with the maskable icon purpose. Once you opt in, the launcher knows it’s allowed to crop your icon into whatever shape it wants, because you’ve guaranteed that the “business end” of the logo sits inside a safe zone. Without that guarantee, the launcher falls back to wrapping your icon in a generic white circle — which is what most users see when a PWA developer hasn’t shipped a maskable variant.

So when you see your launcher icon looking cropped, one of two things is happening:

• You shipped a normal icon, the launcher wrapped it in a white background circle, and now your logo looks like it’s sitting on a postage stamp with too much white space around it.
• You shipped a maskable-purpose icon but didn’t leave a safe zone, and the launcher cropped through the visible parts of your logo.

Both look bad. Both are fixable from the same source PNG.

The 80% safe-zone rule

The official W3C maskable icon spec defines a circular safe zone with a diameter equal to 80% of the icon’s width, centered on the canvas. Every Android launcher mask — circle, squircle, teardrop, rounded square — fits entirely within that circle. As long as everything you actually want visible (logo, text, key shapes) lives inside that 80% circle, every launcher renders it correctly.

For a 512×512 PNG, the safe zone is a circle of diameter 410 pixels, leaving a 51-pixel padding ring around all four edges. The pixels in that ring are not invisible. They have to be filled — with your brand color, a gradient, or any solid background — because launchers in “circle” mode show roughly the full square while launchers in “circle-only” modes crop right up to the 80% circle. Transparent corners produce a rough crop edge against the user’s wallpaper. Always fill the full canvas.

Region	Pixels at 512×512	Purpose
Safe zone (centered circle)	410×410 inscribed	Logo + anything that must always be visible
Visible-but-croppable	51 px ring outside circle	Background fill, decorative pattern, OK to lose
Full canvas	512×512	Must be filled with solid color — no transparency

What goes wrong when you skip this

The most common failure mode in 2026 is shipping a single icon that’s declared as both "any" and "maskable" purpose. That seems efficient — one file, two purposes — but it’s almost always wrong:

• If the file doesn’t have a 51-pixel safe-zone ring, the launcher crops into the logo. Letters get clipped, corners disappear.
• If the file does have the safe-zone padding, then when the same file is used as a regular favicon or a social-share fallback ("any" purpose), the logo looks comically small with huge margins.

The correct pattern in 2026 is to ship two separate 512×512 files: one tight-cropped for "any" and one with the safe-zone padding for "maskable". They share the same logo and brand color — the only difference is the padding ratio.

The manifest.json block to copy

Open your site.webmanifest (or manifest.json) and replace the icons array with:

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

Three icons, three explicit purposes. The launcher picks maskable for the home screen; the app drawer, splash screen, and social fallback pick any. Listing both purposes separately is the single highest-signal change you can make to an existing manifest.

The 30-second fix without redrawing your logo

You do not need to open Figma. You do not need to re-export from your design tool. You need exactly one operation on your existing 512×512 PNG: scale the artwork down to 80% and fill the new background. The Favicon Generator does this in one click, but if you want to do it by hand in any image editor:

1. Open your existing 512×512 PNG.
2. Add a new background layer the same dimensions, filled with your brand color (use the exact hex from your theme_color manifest field for consistency).
3. Scale your logo layer to 80% (410 pixels at its longest edge), center it on the canvas.
4. Flatten and export as icon-512-maskable.png.
5. Add the third entry to your manifest icons array.
6. Reinstall the PWA on an Android device to verify.

If your logo is a wordmark longer than it is tall, scale it to fit inside the 410-pixel safe-zone circle (not the 410-pixel square). The circle’s usable horizontal width at the vertical center is the full 410 pixels, but at the top and bottom edges it’s zero. Centered short wordmarks work; tall narrow wordmarks fail; logos that radiate outward from a center point (most modern startup marks) work best of all.

Picking the right background color

The maskable icon’s background fill is the most visible color choice your app makes after the logo itself — it’s what users see every time they unlock their phone. Three rules that always hold:

• Match your theme_color. The same hex appears in the splash screen, the task switcher, and the home screen. Continuity matters.
• Avoid pure white. White-on-white wallpapers (common in 2026 on minimalist Android skins) make a white maskable icon disappear into the background. Use a faint tint or your brand accent.
• Test against both wallpapers. Install your PWA, then change the device wallpaper between a dark photo and a light solid color. Your icon should remain legible against both.

If you don’t have a brand color yet, the Color Palette Generator outputs harmonious palettes you can lift the maskable background from directly, and pairs them with an accessible foreground tone for the logo.

Testing it the right way

Two tools, both free, both higher-signal than “eyeballing it in Figma”:

• Maskable.app — drop in your PNG, see it rendered inside every Android mask shape at once. Catches the “my logo gets clipped on Samsung but not on Pixel” failure mode before you ship.
• Chrome DevTools → Application → Manifest — opens your live manifest, validates the icon array, and flags missing maskable variants explicitly. If you only audit one thing before launching a PWA, audit this.

If you’re launching a PWA properly, also confirm your Open Graph image is set so the install card looks correct when shared, and verify your meta tags — Chrome surfaces the description and screenshot directly in the install prompt.

What you can safely stop doing

A short list of advice that was correct in 2019 and is wrong in 2026:

• Shipping a any maskable dual-purpose icon. The spec technically allows it; the result almost always looks bad. Ship two files.
• Specifying separate maskable PNGs at 192 and 96 sizes. Modern launchers downscale the 512 maskable as needed. One maskable file is enough.
• Building a separate “background” layer in your manifest. Android native apps use foreground + background layers, but PWAs do not — the maskable purpose is a single flat PNG with the background baked in.
• Adding monochrome icons for the Android themed-icon feature. Themed icons are still experimental on most Android skins as of mid-2026 and aren’t worth the maintenance cost yet.

The 60-second audit

If you only have a minute, run this on your live site:

1. Open /manifest.json or /site.webmanifest in your browser.
2. Confirm at least one entry has "purpose": "maskable".
3. Open that PNG directly. Verify it has a solid (not transparent) background filling the full canvas.
4. Visually confirm the visible logo occupies the centered 80% — not edge-to-edge.
5. Install on an Android device or use maskable.app to preview against every launcher shape.

Five checks. Sixty seconds. Ship it once, and your PWA stops looking like the developer didn’t care.

Bottom line

Maskable icons are the single most visible “polish” signal in a 2026 PWA. The work is trivial — one extra PNG with 20% padding, one extra entry in manifest.json — and the payoff is that your icon looks correct on every Android device, every launcher shape, every wallpaper combination. There are very few changes in modern web development with that ratio of effort to outcome. Ship the maskable variant.

If you want to skip the manual masking and the safe-zone math, the TinyTools Favicon Generator takes your logo, pads it to spec, and outputs the maskable PNG alongside the rest of the canonical 2026 favicon set in a single download.