PWA Manifest Icons: Required Sizes and How to Generate Them

If your web app is installable — or you want it to be — Chrome requires specific manifest icon sizes. Without a 192x192 and 512x512 PNG in your web manifest, the browser disables the "Add to Home Screen" prompt entirely. Here is what you need and how to generate it.

What PWA Manifest Icons Are (and How They Differ from Favicons)

A regular favicon is what appears in browser tabs and bookmarks. Manifest icons are what appear when a user installs your web app to their home screen or app launcher on Android, iOS, and desktop operating systems.

They serve different display contexts:

• Favicon: 16px-48px — browser tabs, bookmarks, address bar
• Manifest icons: 48px-512px — home screen shortcut, splash screen, app store listing (for packaged PWAs)

Both types are often created from the same source image, but they are referenced differently. Favicons use HTML link tags in the page head. Manifest icons are listed in the site.webmanifest JSON file, which is referenced by its own link tag: <link rel="manifest" href="/site.webmanifest">.

You can think of it as: favicons for the browser, manifest icons for the installed app experience.

Required Sizes and What Each One Is Used For

The two required sizes (Chrome minimum):

• 192x192 — Android home screen icon. Chrome requires this size to enable the install prompt.
• 512x512 — used for splash screens, app drawers, and higher-DPI displays. Also required by Chrome for the install prompt.

Additional sizes for broader coverage:

• 48x48 — Android notification icon and small contexts
• 72x72, 96x96 — older Android devices and various launcher sizes
• 128x128, 144x144 — Windows Store and high-res Android tablets
• 180x180 — iOS Apple Touch Icon (referenced via HTML link tag, not manifest, on iOS)

For a standard PWA, include at minimum 192x192 and 512x512. For the most complete coverage, generate all sizes from the same source image — a favicon generator will create the full set in one download.

Sell Custom Apparel — We Handle Printing & Free Shipping

The site.webmanifest File: Structure and Icons Field

A minimal site.webmanifest looks like this:

{
  "name": "My App",
  "short_name": "App",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Save this as site.webmanifest in your web root (same directory as your favicon files), then reference it in your HTML head: <link rel="manifest" href="/site.webmanifest">.

The Toucan Favicon Generator outputs the icons array snippet after generation — paste it into the appropriate section of your manifest file. For a new project, use the full template above as your starting point and replace the icons array with the generated values.

Generating All Required PWA Icon Sizes at Once

The fastest workflow: generate all favicon and manifest icon sizes from a single high-resolution source image.

1. Prepare your source. Export your app icon at 1024x1024 or 512x512 minimum, as a square PNG with your desired background color (not transparent, for most apps — a solid background ensures the icon looks correct on all device launchers).
2. Open the Toucan Favicon Generator at wildandfreetools.com/generator-tools/favicon-generator/
3. Upload the image. The generator creates all standard sizes including 192x192 and 512x512.
4. Download all files. The download includes the PWA sizes alongside the standard favicon sizes.
5. Copy the manifest snippet. The generator shows a ready-to-paste icons array for your site.webmanifest.

Upload all files to your web root. Verify they are accessible at their direct URLs before testing PWA installability.

Common PWA Manifest Icon Errors and How to Fix Them

Install prompt not appearing

Chrome requires both 192x192 and 512x512 icons with purpose: "any" (or no purpose field, which defaults to "any"). Check Chrome DevTools Application panel for specific manifest validation errors.

Icons not found (404)

The paths in your manifest must exactly match where the files are hosted. Test each path by visiting it directly in a browser. Remember case sensitivity on Linux servers.

Maskable icons vs any icons

Android adaptive icons use maskable icons — icons designed to fill the full square with important content in the center safe zone. For the most complete Android experience, include both a maskable and any version. For most apps, the "any" purpose type is sufficient to start.

Wrong manifest MIME type

The server must serve site.webmanifest with Content-Type: application/manifest+json. Some servers default to text/plain, which Chrome may reject. Check server headers if you see manifest parsing errors in DevTools.

Frequently Asked Questions

What sizes do PWA manifest icons need to be?

The Chrome minimum to enable PWA installability is 192x192 and 512x512. For full device coverage, also include 48x48, 72x72, 96x96, 128x128, and 144x144. The 180x180 Apple Touch Icon is referenced separately via an HTML link tag, not the manifest.

Do PWA icons and regular favicons need to be the same image?

They do not need to be identical, but visual consistency is strongly recommended. Use the same source image for both — generate all sizes at once for a coherent icon set across tab, bookmark, and home screen contexts.

What format should PWA manifest icons be?

PNG is the universal standard. SVG is increasingly supported as a manifest icon type but PNG works everywhere. Avoid JPEG — it does not support transparency and has lossy compression artifacts that are visible on adaptive icon backgrounds.

Why is my PWA failing the Chrome installability check?

The most common causes: missing 192x192 or 512x512 icon, icons returning 404 (wrong path in manifest), manifest not being served with the correct MIME type, or missing the manifest link tag in the HTML head. Open Chrome DevTools Application > Manifest to see specific validation errors.