If you've ever installed a PWA on your phone only to see a pixelated mess on your home screen, your site webmanifest icon sizes are probably wrong. Android doesn't just shrink your largest image. It aggressively crops, scales, and masks your icons based on what you declare in your manifest.json.

I learned this the hard way in 2026 when an app I built looked razor-sharp on my Pixel but showed a tiny, off-center blob on a Samsung device. The issue wasn't the image quality. It was the manifest configuration.

If you need a primer on the manifest file itself, read our developer's guide to favicon site.webmanifest. Here, we are going strictly into the icon array and the exact dimensions you need to declare.

Prerequisites

You need a high-resolution source image (at least 512x512 pixels) and a text editor. If you don't have a source file, pop over to Mzu favicondl to generate one from an existing logo or image.

Step-by-Step: Configuring Your Manifest Icons

Let's build a bulletproof icons array. We will focus on the three entries that actually matter for modern Android and PWA support.

1. The 192x192 Standard PNG

This is your baseline. Android uses this size for the app launcher icon on most standard displays. You must declare it explicitly.

Do not rely on the browser to downscale your 512x512 image. Android's rendering engine sometimes applies weird interpolation when scaling down, leaving your icon looking softer than it should. Provide a dedicated 192x192 PNG.

2. The 512x512 High-Res PNG

This is the splash screen icon. When your PWA launches, Android displays this image on a white background while the service worker boots up. If you only declare one icon in your manifest, make it this one (but honestly, don't do that).

3. The Maskable Icon (Crucial)

Android 13+ and modern Chrome OS use adaptive icons. If you don't declare a maskable icon, the OS puts your standard icon inside a white circle. It looks terrible.

Maskable icons require a 'safe zone' in the center. You must pad your design so the OS can crop it into any shape (circle, squircle, rounded square) without cutting off your logo. We explain the design side of this in our maskable icon guide.

The Complete Code

Here is the exact icons array you should paste into your manifest.json right now:

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

Notice the purpose field. This tells the OS exactly how to use the file. If you omit it, the browser assumes any, which means your maskable icon might get used as a standard icon and look weirdly padded.

Common Pitfalls

Even with the right code, things break. Here are the mistakes I see most often.

Using a Single 'any maskable' Icon

Some developers try to save bytes by declaring one icon with "purpose": "any maskable". Don't do this. A maskable icon has built-in padding. If the browser uses that same file for a standard any request, your icon will look tiny inside the launcher. Always split them into separate files.

Forgetting the Safe Zone

You designed a beautiful 512x512 icon. You uploaded it as maskable. The OS crops it into a circle, and half your logo disappears. You need to keep your artwork within the center 80% of the canvas (the safe zone) for maskable icons.

Mismatched Sizes Attribute

If your file is actually 512x512 pixels but you write "sizes": "192x192" in the manifest, Android gets confused. The OS trusts your manifest declaration over the actual file dimensions. Always verify your image dimensions match the string.

What the Pros Do

Look at how GitHub handles their PWA. They don't ship 15 different PNG sizes. They ship the standard 192 and 512, plus a dedicated maskable version. That is the modern standard. You can verify this yourself by opening DevTools and checking their manifest.

If you want to inspect how other sites handle their icons, use Mzu favicondl to download and analyze their manifest configurations. It saves you from digging through minified HTML.

Wrapping Up

Stop generating dozens of icon files. You only need three entries in your site webmanifest icon sizes array: 192x192, 512x512, and a 512x512 maskable version. Keep your code clean, respect the safe zone, and your PWA will look native on every device.