Wrong Favicon on Mobile Home Screen? Fix It

8 min read

June 5, 2026

The tab icon looks correct in Chrome or Safari, but adding your site to the mobile home screen shows a generic tile, an old logo, or the wrong image entirely. Mobile home screen icons use different files and tags than browser tab favicons. iOS reads apple-touch-icon. Android PWAs read manifest.json icons. Confusing the two is the most common cause.

This guide separates tab icons from home screen icons and walks through fixes for iOS and Android. Scan your URL with Favicon Check to see every declared icon in one place.

Tab favicon vs home screen icon

They are not the same asset in most setups.

Context	What the OS uses	Typical tag or file
Browser tab (mobile)	`rel="icon"` PNG or ICO	`<link rel="icon">`
iOS home screen	Apple touch icon	`<link rel="apple-touch-icon">`
Android home screen (PWA)	Manifest icons	`"icons"` in `site.webmanifest`
Android browser tab	Same as desktop tab	`rel="icon"`

A perfect 32×32 tab icon does nothing for a 180×180 iOS tile if apple-touch-icon is missing or points at the wrong file.

See the Favicon Sizes Guide for recommended dimensions per context.

Why iOS shows the wrong home screen icon

Missing apple-touch-icon

Without an explicit tag, iOS may screenshot the page, use a low-res crop, or fall back to an old cached tile from a previous visit.

Add at minimum:

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

Place it in server-rendered <head>, not injected after JavaScript loads.

Wrong size or aspect ratio

Apple expects a square PNG, ideally 180×180 pixels. A 32×32 favicon upscaled on the home screen looks blurry or off-center. A wide logo without padding gets cropped unpredictably.

Design a dedicated square asset with safe padding around the mark. Do not reuse the tiny tab favicon file.

Multiple apple-touch-icon tags

Several tags with different sizes can make iOS pick an unexpected one:

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

Audit with Favicon Check. Remove duplicates and outdated paths. One primary 180×180 file covers modern iPhones.

Cached home screen shortcut

iOS caches the tile when the user first adds to home screen. You fixed the server but the shortcut still shows 2022 artwork.

Fix options:

User removes the shortcut and adds again
You change the href to a new filename (apple-touch-icon-v2.png)
User clears Safari website data (heavy-handed)

This is separate from tab favicon cache. See Favicon Not Updating After Change? for cache busting patterns.

precomposed vs default styling

Legacy sites used apple-touch-icon-precomposed to skip Apple's gloss overlay. Modern iOS ignores the gloss effect. Standard apple-touch-icon is enough today.

Why Android shows the wrong icon

Browser tab vs installed PWA

Chrome on Android uses rel="icon" for the tab, same as desktop. When users "Install app" or "Add to Home screen" from a PWA-capable site, Android reads manifest.json:

{
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Wrong or missing manifest icons produce a generic chrome icon or a cropped screenshot on the launcher.

Link the manifest in HTML:

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

Shortcut from browser menu (non-PWA)

Adding to home screen from Chrome menu without a manifest may use a generated icon from the page. That icon is not your favicon file. It is a one-off snapshot. Only a proper manifest or apple-touch-icon gives you control.

Maskable icons

Android adaptive icons prefer "purpose": "maskable" entries with safe zone padding. A logo that fills the entire 512×512 canvas may get clipped in a circle mask on some launchers.

Provide both any and maskable variants if your generator supports it.

Step-by-step fix for iOS

Create a 180×180 PNG with your logo centered and padding.
Upload to /apple-touch-icon.png or a versioned path.
Add the link tag to your layout <head>. See How to Add a Favicon to Your Website.
Deploy and scan with Favicon Check. Confirm apple-touch-icon appears with preview.
On a test iPhone, remove any existing home screen shortcut.
Open Safari, visit the site, Share > Add to Home Screen. Verify the tile.
If still wrong, rename the file and update href to bust cache.

Step-by-step fix for Android PWA

Add 192×192 and 512×512 PNGs to your static assets.
Reference them in site.webmanifest with correct sizes and type.
Link manifest in HTML <head>.
Deploy. Validate manifest loads at https://yourdomain.com/site.webmanifest.
Scan with Favicon Check. Manifest icons should list with previews.
Uninstall any existing PWA shortcut. Re-add from Chrome menu.
Compare tab icon (rel="icon") vs launcher icon (manifest) separately.

When the tab icon is wrong on mobile too

If the mobile browser tab itself shows the wrong icon, not just the home screen, the problem is rel="icon", not apple-touch-icon.

Check:

Relative paths breaking on nested routes
HTTP vs HTTPS mixed content
Old cached favicon at the same URL

Full tab icon troubleshooting: Favicon Not Showing in Browser?.

Safari on iOS tabs use the same rel="icon" tags as macOS Safari. See Safari Favicon or Tab Icon Not Working for Safari-specific issues.

Common mistakes

Using favicon.ico for home screen

ICO files work in some desktop tabs. iOS wants PNG for apple-touch-icon. Serve a dedicated PNG.

Same image file for all sizes without testing

One 512×512 PNG declared as apple-touch-icon may work but loads slower than needed. iOS prefers 180×180 for the tile. Tab wants 32×32. Right-size each context per the sizes guide.

Only fixing production homepage

Tags must live in a global layout. A blog post template missing apple-touch-icon breaks icons when users bookmark deep links.

Forgetting manifest after favicon HTML fix

Developers fix tab icons, QA passes on desktop, iOS home screen still broken because apple-touch-icon was never added.

Blurry tile mistaken for wrong icon

A upscaled small logo looks like the "wrong" brand mark. Fix source dimensions: Favicon Looks Blurry?.

Enterprise and multi-brand sites

Large organizations sometimes serve different apple-touch-icon files per subdomain or locale. A marketing microsite at promo.example.com may inherit the corporate favicon from a shared CDN path while the product app uses its own manifest icons.

Document which icon belongs to which property. QA should add each subdomain to home screen separately. A wrong tile on app.example.com while www.example.com looks fine usually means the app layout template never received apple-touch-icon tags.

If you use hreflang or locale-specific layouts, confirm every locale template includes the same icon block. Missing tags on /de/ pages only produce wrong tiles for German users who bookmark those URLs.

Testing without guessing

Manual testing on real devices is best for home screen tiles. Automated checks still help for declared tags.

Run Favicon Check on production URL.
Confirm apple-touch-icon, manifest icons, and rel="icon" all list with reachable URLs.
Open each icon URL on your phone in mobile Safari or Chrome.
Add to home screen on a device that never saved an old shortcut.
Optional: Open Graph scanner on the same URL for broader metadata QA before launch.

FAQ

Why does my site look fine in the tab but wrong on the home screen?

Home screen icons use apple-touch-icon on iOS and manifest icons on Android PWAs. Tab favicons use rel="icon". Different files, different tags.

Do I need both apple-touch-icon and favicon?

Yes, for full coverage. Tab browsers read favicon link tags. iOS home screen reads apple-touch-icon. Android installed apps read manifest icons.

What size should apple-touch-icon be?

180×180 pixels is the standard for current iPhones. See the Favicon Sizes Guide for the full matrix.

I updated apple-touch-icon but my iPhone still shows the old tile

iOS caches home screen shortcuts. Remove the shortcut and re-add, or change the icon URL to a new filename.

Android Add to Home screen ignores my favicon

Non-PWA shortcuts may use a page snapshot. Add a web app manifest with 192 and 512 icons for a controlled launcher icon.

Can I use SVG for apple-touch-icon?

iOS does not reliably use SVG for home screen tiles. Use PNG for apple-touch-icon. SVG may work for some tab contexts with PNG fallback.

Wrong icon only on one phone in the team

That device likely has an old cached shortcut or an old PWA install. Remove home screen icon and reinstall after server fix.

How do I audit all icon tags at once?

Paste your URL into Favicon Check. It lists rel="icon", apple-touch-icon, manifest entries, and /favicon.ico with previews.

Bottom line

Wrong favicon on the mobile home screen means the wrong file type or tag for that context, not a broken tab favicon. Add a proper 180×180 apple-touch-icon for iOS, manifest icons for Android PWAs, and validate everything with Favicon Check. Remove old shortcuts when testing because mobile OS caches home screen tiles separately from browser tabs.