Your Android PWA icon is missing when the Web App Manifest does not declare valid icons entries, when the JSON file is unreachable, or when declared sizes do not match the files on disk. Chrome and other Chromium browsers read the manifest for home screen and install prompts. They do not reuse your tab favicon automatically.
This guide explains why the manifest matters, how to add the correct 192x192 and 512x512 icons, and how to verify everything on a live URL before you ship another build.
Quick diagnosis
| Symptom | Likely cause |
|---|---|
| Generic gray icon on Android home screen | No manifest icons or 404 on icon URLs |
| Tab favicon works, home screen does not | Icons only in HTML, not in manifest |
| Install prompt shows wrong or blurry icon | Missing 512x512 or wrong purpose value |
| Icon on one device, not another | Cached old manifest or CDN stale JSON |
| Lighthouse PWA audit fails on icons | Empty icons array or invalid MIME type |
The tab favicon and the PWA icon solve different jobs. Browsers fetch link rel="icon" for tabs. Android reads manifest.json for shortcuts and installed apps. You need both. See the full size breakdown in Favicon Sizes Explained.
Why Android ignores your tab favicon
When someone taps "Add to Home screen" in Chrome on Android, the browser looks up your manifest. If icons is empty or points to broken URLs, Chrome falls back to a screenshot of the page or a generic placeholder. Your crisp 32x32 tab icon never enters the equation.
The manifest link must appear in your HTML head:
<link rel="manifest" href="/manifest.webmanifest">The manifest file must be served with a valid JSON content type and return HTTP 200. A redirect loop or a 404 on /manifest.webmanifest means no PWA icons at all.
Minimum icon set for Android
Google recommends at least two PNG sizes:
- 192x192 - home screen shortcut, app drawer
- 512x512 - splash screen, install UI, Play Store style listings for PWAs
Example manifest block:
{ "name": "My App", "short_name": "MyApp", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#3367d6", "icons": [ { "src": "/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ]}Each src must resolve to a real PNG at that exact pixel size. Declaring "sizes": "192x192" while serving a 512x512 file causes scaling artifacts on some launchers.
Step-by-step fix
1. Confirm the manifest is linked and reachable
Open view-source on your production URL. Search for rel="manifest". Copy the href value and open it in a new tab. You should see raw JSON, not an HTML error page.
Common failures:
- Manifest only injected by client-side JavaScript
- Wrong path on nested routes (
href="manifest.json"instead of/manifest.json) - Manifest behind authentication or geo blocking
Put the manifest link in server-rendered HTML. Frameworks like Next.js can expose it via metadata or a static file in public/.
2. Add or repair the icons array
If icons is missing, add the 192 and 512 entries above. Export both PNGs from a square master at 512x512 or higher. Downscale for 192. Never upscale a small favicon.
For maskable icons (adaptive icons on Android 8+), add entries with "purpose": "maskable" or "purpose": "any maskable". Maskable icons need extra safe padding so the OS crop circle does not clip your logo. A dedicated PWA Icon Sizes guide covers maskable layout in detail.
3. Match paths to your deploy output
Static hosts and CI pipelines sometimes omit the icons/ folder. After deploy, request each icon URL directly:
https://yoursite.com/icons/icon-192x192.png
https://yoursite.com/icons/icon-512x512.png
A 404 on either URL produces a missing home screen icon even when the manifest JSON looks perfect.
4. Clear caches and retest
Chrome caches manifests aggressively. Test in an incognito window or after clearing site data. Uninstall any existing home screen shortcut and add it again.
Run Favicon Check on your URL. It parses the manifest, lists every declared icon, and lets you download each file to confirm dimensions without opening DevTools.
Maskable vs any purpose
Android adaptive icons apply a circular or squircle mask. Icons tagged "purpose": "any" are displayed as-is. Icons tagged "purpose": "maskable" follow Google's safe-zone guidelines: keep important content inside the center 80% circle.
A practical setup includes four entries:
"icons": [ { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" }, { "src": "/icons/icon-192-maskable.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" }, { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" }, { "src": "/icons/icon-512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }]If you only ship "any" icons, Android still works. Maskable versions just look cleaner on Pixel and Samsung launchers.
Common mistakes
Empty icons array
Some starter templates ship a manifest with "icons": [] as a placeholder. Lighthouse flags it. Android shows a bland default.
Wrong MIME type on icon files
Serve PNGs as image/png. Serving icons as application/octet-stream rarely breaks display but can confuse audit tools and some CDNs.
Single 512x512 entry only
One large icon can work because Chrome downscales. Explicit 192x192 avoids blur on mid-density screens and satisfies PWA checklists that expect both sizes.
Manifest on wrong origin
If your app lives at app.example.com but icons reference example.com/icons/... without CORS headers, fetches may fail on cross-origin installs.
Forgetting apple-touch-icon for iOS
This article focuses on Android, but iOS uses link rel="apple-touch-icon", not the manifest. Cover both platforms. See Apple Touch Icon Size Guide for the 180x180 requirement.
How manifest icons relate to HTML favicons
You still need standard favicon tags for browser tabs. The manifest does not replace them. A complete setup includes:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="manifest" href="/manifest.webmanifest">How to Add a Favicon to Your Website walks through HTML tags. This article covers the manifest side.
Debugging with browser tools
In Chrome DevTools, open Application > Manifest. The panel shows detected icons, errors, and installability. Red entries usually mean 404 paths or size mismatches.
The Lighthouse PWA category also reports missing icons. Fix manifest issues first before chasing service worker scores.
For a faster single URL audit, Favicon Check combines HTML link tags, /favicon.ico, apple-touch-icon, and manifest icons in one report.
Framework-specific manifest placement
Where you define manifest icons depends on your stack. The rule is the same: production must serve JSON at a stable public URL with reachable PNG paths.
Next.js App Router: place manifest.webmanifest or manifest.json in app/ or public/. Use the metadata API or a static file. Icon PNGs belong in public/icons/. After next build, confirm files exist in .next/static or output folder before promoting to production.
Vite / React SPA: put manifest.webmanifest in public/ alongside icons. Vite copies public/ verbatim to dist root. A common bug is referencing /icons/... in JSON while files live only in src/assets/.
WordPress: plugins like Super PWA or custom theme functions write manifest JSON. Conflicts happen when both a plugin and theme declare manifests. One source of truth only. Upload icon PNGs to the media library or theme directory and use absolute paths from site root.
Static site generators (Hugo, Eleventy, Astro): generate manifest at build time with hashed filenames only if you also update src after each deploy. Stable paths like /icons/icon-192.png simplify caching and audits.
After any framework deploy, run Favicon Check on the production URL, not localhost, unless you tunnel staging.
Before and after checklist
Use this list when fixing a reported missing PWA icon:
- View-source shows
link rel="manifest"with root-relative href - Manifest URL returns JSON with HTTP 200
iconsarray has at least 192x192 and 512x512 entries- Each
srcURL opens directly in browser and shows correct PNG dimensions typeisimage/pngfor each PNG icon- apple-touch-icon 180x180 exists for iOS users who bookmark instead of install
- Tab favicons exist per How to Add a Favicon to Your Website
- Favicon Check shows green fetch for every manifest icon
If step 4 fails, fix static hosting or CDN path rules before tweaking JSON. No amount of manifest editing fixes a 404 on the PNG itself.
FAQ
Why does my PWA icon work in Chrome desktop but not on Android?
Desktop install flows and Android home screen shortcuts use different code paths. Android strictly requires manifest icons at 192x192 and preferably 512x512. Desktop may fall back to favicon or page metadata.
Can I use SVG icons in the Web App Manifest?
The spec allows SVG in some contexts, but Android Chrome reliably expects PNG for install icons. Ship PNG for production PWAs.
Do I need a service worker for the home screen icon?
No. The icon comes from the manifest. A service worker is required for full PWA install criteria in Chrome, but the missing icon problem is almost always an icons array issue, not service worker related.
What happens if sizes in JSON do not match the file?
Browsers may still display the image but scale it unpredictably. Lighthouse warns about size mismatches. Export exact dimensions.
How do I update a home screen icon after deploy?
Change the PNG files, bump a cache buster in src if needed (icon-192.v2.png), remove the old shortcut, and add again. Manifest cache can persist for hours on some devices.
Is favicon.ico enough for PWA?
No. Root favicon.ico covers legacy tab requests. Android home screen icons come only from manifest icons.
What is the difference between missing PWA icons and missing favicon?
Missing favicon affects browser tabs and bookmarks. Missing PWA icons affects Android home screen, install banners, and splash screens. Fix both with separate file sets.
How can I test before launch?
Paste your production URL into Favicon Check. Confirm manifest parse success, icon HTTP status, and download each PNG to verify pixels.
Bottom line
Android PWA icons live in the Web App Manifest, not in your tab favicon tags. Link the manifest in server HTML, declare 192x192 and 512x512 PNGs with correct paths, add maskable variants when you can, and verify the live URL with Favicon Check. Most missing icon reports clear up once the icons array points to real files on the same origin.
