If you've ever installed a PWA on your Android home screen only to see a blurry, stretched-out mess of your logo, your web app manifest icons 192 512 are probably misconfigured. Android doesn't guess what icon to use—it strictly reads your manifest.json file and picks the closest match. If you mess up the dimensions or the image padding, that's exactly what you get.

Google's own Lighthouse audit will straight-up fail your PWA if it cannot find a 192x192 and a 512x512 PNG icon in your manifest. They aren't just arbitrary numbers. The 192px icon is the standard size used for the home screen shortcut, while the 512px icon is what Android uses to generate your app's splash screen. You need both, and they need to be perfect.

We won't cover the broader PWA ecosystem here—if you need a general overview, check out our Web App Manifest Favicon Guide. Instead, we are going to focus purely on the 192 and 512 pixel icons: why they break, how to generate them correctly, and the exact JSON you need to make them work.

Prerequisites: Getting Your Source Image Right

Before you resize anything, you need a high-quality source file. Do not start with a 16x16 favicon and try to upscale it. You need a vector SVG source file or a PNG that is at least 1024x1024 pixels.

If you only have a rasterized logo, you'll notice that scaling it up to 512px introduces blur. This is why working from SVG is the professional standard in 2026. It scales infinitely without losing a single pixel of clarity. If your logo relies on tiny text, you're going to have a bad time—read our Favicon Design Tips to understand why simplifying your mark is critical for small formats.

Step-by-Step: Generating and Configuring the Icons

Let's walk through the actual implementation. You can use any image editor, but we'll use standard CLI tools and plain JSON configuration so you can automate this in your build pipeline.

Step 1: Export the 192 and 512 PNGs

Open your source SVG in your editor of choice (Figma, Sketch, or Adobe XD). Export two distinct PNG files. Name them exactly icon-192.png and icon-512.png. Naming conventions matter because it makes your manifest readable and easy to debug.

If you are using a build tool like Vite or Webpack, you can automate this with a plugin. But for a quick static site, just dropping them in your /public/icons/ directory works perfectly.

Step 2: Write the Manifest JSON

Now, open your manifest.json file. You need to declare both icons explicitly in the icons array. Here is the exact configuration you should copy:

{
  "name": "My Awesome App",
  "short_name": "Awesome",
  "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"
    }
  ]
}

Notice the purpose field. Setting it to any tells the browser this icon can be used anywhere. We'll discuss maskable icons in the pitfalls section, because that's where most developers get tripped up.

Step 3: Link the Manifest in Your HTML

Your manifest won't do anything if the browser doesn't know it exists. Add this single line to the <head> of your HTML document:

<link rel='manifest' href='/manifest.json'>

That's it. Once you deploy, Android devices will read this file and pull the correct 192px and 512px icons automatically.

Common Pitfalls When Setting 192 and 512 Icons

Getting the JSON right is only half the battle. Most developers fail the Lighthouse PWA audit because of subtle design or configuration mistakes. Here are the three most common issues I see in code reviews.

Pitfall 1: Forgetting the 'purpose' Maskable Trap

Android 8+ introduced adaptive icons. If you want your icon to look native and fill the circular or squircle shapes on different launchers, you need a maskable icon. However, you cannot just set purpose: "maskable" on your existing 192 and 512 PNGs.

Maskable icons require a full-bleed background color with your logo placed inside a safe zone (the inner 80% of the canvas). If your logo touches the edges, the Android launcher will crop it awkwardly. You need to export separate versions specifically designed with padding, and declare them like this:

{
  "src": "/icons/maskable-192.png",
  "sizes": "192x192",
  "type": "image/png",
  "purpose": "maskable"
}

You can actually have multiple 192x192 entries in your manifest as long as their purpose is different. I recommend having one any and one maskable for both 192 and 512 sizes.

Pitfall 2: Serving the Wrong MIME Type

If your icons are failing to load on mobile but work fine on desktop, check your server headers. Some strict web servers default to serving PNGs as application/octet-stream instead of image/png.

Android Chrome is notoriously picky about MIME types in the manifest. If the type field in your JSON doesn't match the server's Content-Type header, the OS will silently reject the icon. Make sure your Nginx or Apache config is correctly mapping .png files.

Pitfall 3: Using a 512px Icon with Too Much Detail

Just because you have a 512x512 canvas doesn't mean you should cram your entire company mission statement into it. When Android scales that 512px icon down for a notification or a small shortcut, all that detail turns into mud.

Look at how Stripe handles their PWA icon. They use a simple, high-contrast mark on a solid background. It looks perfectly sharp whether it's displayed at 512px on a splash screen or scaled down to 48px in a notification bar. Keep it simple.

Verifying Your Setup

Don't just deploy and hope. You need to verify your manifest icons are working correctly. Open Chrome DevTools, go to the Application tab, and click on Manifest. You should see your 192 and 512 icons rendered clearly under the 'Icons' section.

If they show up there without a broken image icon, you've done it right. If you want to quickly grab a 192 or 512 icon from another site to see how they structured their padding, you can use Mzu favicondl to pull the exact manifest files and compare their setup.

Setting up your web app manifest icons 192 512 correctly takes about ten minutes if you have the right source file. Skip the guesswork, export the exact sizes, declare the correct MIME types, and your PWA will look native on every Android device.