Web App Manifest Icons Explained (2026)

Web app manifest icons are PNG images declared in your site.webmanifest file that Android, Chrome, and installable PWAs use for home screen shortcuts, splash screens, and app install banners. They are separate from the small favicon in the browser tab. If manifest icons are missing or wrong, your tab icon can look fine while Add to Home Screen shows a generic placeholder.

This guide explains manifest icon sizes, the purpose field, maskable icons, and how to wire the manifest into HTML without breaking desktop favicons.

Manifest icons vs tab favicons

Two different systems read two different files.

Skipping manifest icons does not break desktop tabs. It breaks Android home screen branding and PWA install UX. Skipping tab favicons does the opposite. Production sites need both.

The Favicon Sizes Guide maps every size in one table. This article goes deep on the manifest slice only.

Minimum manifest icon setup

A valid starter site.webmanifest:

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

Link it from HTML:

<link rel="manifest" href="/site.webmanifest">

Without that link tag, browsers ignore the JSON file even if it sits in your repo root.

Why 192×192 and 512×512

• 192×192 - Android home screen icon density baseline, Chrome install UI
• 512×512 - Splash screens, high-DPI install surfaces, store-style previews

Google's PWA documentation treats these as the core pair. Ship both even if your app is not a full offline PWA. Marketing sites benefit from correct icons when users pin them to mobile home screens.

The purpose field - any vs maskable

Manifest icons accept an optional purpose array:

{
  "src": "/icon-512-maskable.png",
  "sizes": "512x512",
  "type": "image/png",
  "purpose": "maskable"
}

Android adaptive icons crop outer padding. A logo that fills edge-to-edge gets clipped. Maskable icons keep critical artwork inside the center 80% safe zone with extra padding around it.

Best practice for 2026:

1. Ship one 512×512 and 192×192 pair with "purpose": "any".
2. Add a second pair labeled "purpose": "maskable" if Android installs matter to you.
3. Or design a single maskable master that passes Google's safe zone and declare "purpose": "any maskable".

Flat logos with tight crops look broken on Android without maskable variants. That is a design problem, not a caching bug. See Common Favicon Mistakes That Break Your Brand for layout pitfalls.

Full manifest example with maskable icons

{
  "name": "OpenGraph Check",
  "short_name": "OG Check",
  "description": "Preview Open Graph and favicon tags",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#2563eb",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/android-chrome-192x192-maskable.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/android-chrome-512x512-maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

File names are arbitrary. Paths must match real URLs on your origin.

SVG and ICO do not belong in manifest icons

The manifest spec targets raster PNG for broad client support. Do not put SVG or ICO entries in "icons" and expect Android install flows to work.

Desktop SVG favicons are fine in HTML. Keep them separate. Read SVG Favicon Guide for the HTML side.

Use PNG exports from the same 512×512 master you use for apple-touch-icon. iOS still needs:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Manifest icons do not replace apple-touch-icon on iPhones.

How browsers fetch manifest icons

1. Browser loads HTML.
2. Parser finds <link rel="manifest" href="...">.
3. Browser fetches JSON (must be valid, Content-Type: application/manifest+json or application/json).
4. On install or Add to Home Screen, client picks the best sizes match and respects purpose.

If step 2 fails, steps 3-4 never run. Developers commit site.webmanifest but forget the link tag. Favicon Check flags missing manifest links and lists parsed icon URLs.

start_url, scope, and icon caching

Manifest icons cache independently from tab favicons. Replacing PNG files without cache busting leaves old home screen icons for days. Strategies in Favicon Cache Explained apply to manifest assets too.

Step-by-step - add manifest icons to an existing site

1. Export 192×192 and 512×512 PNGs from your brand master.
2. Optional: export maskable variants with safe zone padding.
3. Upload PNGs to a public path (usually site root).
4. Create or update site.webmanifest with correct src, sizes, type, and purpose.
5. Add <link rel="manifest" href="/site.webmanifest"> to server-rendered <head>.
6. Keep existing rel="icon" and apple-touch-icon tags. Manifest does not replace them.
7. Serve manifest with correct MIME type.
8. Scan live URL with Favicon Check and confirm icons parse.
9. On Android Chrome, use Add to Home Screen to verify visually.

HTML tag templates live in Favicon HTML Link Tags Example.

Manifest icon mistakes

Icons in JSON but no manifest link in HTML

The most common silent failure. The JSON file exists in Git but never reaches the browser parser.

Wrong sizes string

Use "192x192", not "192" or "192px". Mismatch causes clients to skip the entry.

512×512 file that is actually 256×256 pixels

Auditors read metadata and dimensions. Upscaled small files look soft on splash screens. Same root cause as blurry tab icons in Favicon Looks Blurry? Fix Pixelation.

Single 192×192 entry only

Some install surfaces want 512×512. Ship both.

Manifest behind authentication

Crawlers and install flows fetch icons anonymously. Public URLs only.

Broken JSON trailing comma

Invalid manifest means zero icons. Validate JSON before deploy.

theme_color and background_color

These keys control the Android status bar and splash screen backdrop during PWA launch. They do not replace icon files but affect first paint next to your 512×512 splash art.

Pick theme_color aligned with your header bar. Pick background_color that matches icon padding so the splash does not flash the wrong brand color.

Testing manifest icons before launch

Manual checks:

• View-source for manifest link tag
• Open /site.webmanifest directly in the browser
• Confirm each src URL returns 200 PNG
• Add to Home Screen on Android Chrome

Automated check:

Run Favicon Check on your production URL. It extracts manifest icon entries, shows dimensions, and surfaces broken paths alongside tab favicons. For a full pre-launch workflow, see What Is a Favicon Checker?.

If icons are missing entirely, start with Favicon Not Showing in Browser? Fix It for path and HTML debugging.

Manifest icons for non-PWA marketing sites

You do not need service workers or offline mode to benefit from manifest icons. Any site that users pin to mobile home screens should declare them. Blogs, docs, and SaaS marketing pages all qualify.

display: "browser" still allows icon declarations. "standalone" changes how Chrome opens the shortcut but is optional for icon presence.

FAQ

Are web app manifest icons required?

Not legally required, but expected for Android home screen pins and Chrome install prompts. Without them, users see generic placeholders.

What size are PWA manifest icons?

192×192 and 512×512 PNGs are the standard pair. Add maskable variants when Android adaptive cropping matters.

Do manifest icons replace favicon.ico?

No. Browsers still request /favicon.ico and rel="icon" for tabs. Manifest icons serve install and home screen contexts.

Can I use one PNG for both manifest sizes?

You can point both entries at the same 512×512 file with different sizes strings, but serving a true 192×192 file saves bandwidth on lower-density paths.

What is a maskable icon?

A PNG designed with padding so Android adaptive shapes do not clip your logo. Declared with "purpose": "maskable".

Why does Chrome show the wrong icon on the home screen but the tab is correct?

Tab uses rel="icon". Home screen uses manifest icons. Fix the manifest JSON and PNG files, not only the tab favicon.

How do I verify manifest icons without an Android phone?

Use Favicon Check to parse manifest entries from your live URL. Confirm each src returns a valid PNG.

Should the manifest link use an absolute URL?

Root-relative /site.webmanifest works for same-origin sites. Absolute HTTPS URLs are fine for CDNs. Keep paths stable after deploy.

Bottom line

Declare 192×192 and 512×512 PNG icons in site.webmanifest, link the manifest from HTML, and add maskable variants if Android installs matter. Manifest icons complement tab favicons and apple-touch-icon - they do not replace them. Validate JSON, MIME types, and live paths with Favicon Check, and cross-check sizes in the Favicon Sizes Guide.