Favicon Cache Explained - Why Browsers Keep the Old Icon

Browsers cache favicons separately from normal page cache because tab icons are fetched early, stored per origin, and reused across sessions to avoid flicker. When you replace favicon.ico at the same URL, many users still see the old icon until cache expires or the filename changes.

This guide explains why that happens, how Chrome, Firefox, and Safari treat favicon cache, and the safe ways to roll out a new icon without confusing your team.

Quick answer - why your new favicon is not visible

You probably did deploy the new file. The browser is still showing a cached bitmap keyed by URL, not file contents. Favicon requests often skip the same revalidation rules as HTML. Same path plus new pixels equals old icon in the tab.

Other common triggers:

• CDN or hosting cache still serves the previous ICO
• You updated HTML href on one template but not all layouts
• DevTools hard refresh reloads the page, not always the favicon store
• Manifest or apple-touch-icon caches separately from tab favicon

If nothing loads at all, that is a missing file problem. Start with Favicon Not Showing in Browser? Fix It. This article is for stale icons after a successful deploy.

How favicon caching differs from page caching

Normal pages use Cache-Control, ETag, and Last-Modified. Favicons still receive those headers, but browser internals also keep a dedicated favicon database per profile.

Chrome may display a cached 16×16 raster even when view-source shows updated link tags. The HTML changed. The icon bitmap did not reload.

Layers of cache you must clear

1. Browser favicon store

Chrome, Firefox, Edge, and Safari each cache icons locally. Clearing site data or cached images for your origin forces a refetch. Closing the tab is not enough.

Private/incognito windows help test because they start with an empty favicon cache for that session.

2. CDN and reverse proxy

If favicon.ico sits behind Cloudflare, Fastly, or nginx proxy_cache, edge nodes may serve yesterday's ICO with long max-age. Purge the icon paths explicitly:

/favicon.ico
/favicon-32x32.png
/favicon-16x16.png
/apple-touch-icon.png
/android-chrome-192x192.png
/android-chrome-512x512.png
/site.webmanifest

Purging HTML without purging icons leaves stale branding in tabs.

3. Service worker cache

PWAs that cache static assets may serve old icons from cache-first strategies. Bump the service worker version and exclude icon paths from long-lived caches, or version icon file names.

4. Mobile home screen icons

Add to Home Screen copies manifest and apple-touch-icon assets to the device shell. Updating the website does not update pinned icons on users' phones. They must remove and re-add the shortcut. Manifest behavior is covered in Web App Manifest Icons Explained.

Cache busting strategies that work

Strategy A - change the file name (most reliable)

Instead of overwriting /favicon.ico, ship:

/favicon-2026.ico
/favicon-32x32-v2.png

Update HTML:

<link rel="icon" href="/favicon-2026.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32-v2.png">

New URL equals new cache key. Tabs pick up the icon on next fetch.

Keep a redirect from old paths if external tools still request /favicon.ico.

Strategy B - query string cache bust (use with care)

<link rel="icon" href="/favicon-32x32.png?v=20260612">

Works on many stacks. Some crawlers strip query strings. Prefer filename versioning for high-stakes relaunches.

Strategy C - short Cache-Control during rollout

On icon paths during deploy week:

Cache-Control: public, max-age=3600, must-revalidate

Return to long cache after the rollout stabilizes. Icons are static assets. Long cache is good after the correct file is confirmed.

Strategy D - verify before you announce

Scan production with Favicon Check immediately after deploy. The tool fetches icons as a fresh client would and lists HTTP headers when paths fail. Confirm the new bytes are live before telling marketing the rebrand shipped.

Browser-specific notes

Chrome and Edge

Aggressive favicon persistence. Use a new filename or clear site data under chrome://settings/siteData. Hard reload (Cmd+Shift+R) does not always refetch favicons.

Firefox

Similar dedicated caching. about:preferences#privacy clear cache, or test in private window.

Safari macOS and iOS

Safari caches tab icons and touch icons separately. iOS home screen icons require re-pinning after manifest or apple-touch-icon changes.

RSS readers and search

Third-party caches (Google Search favicon, feed readers) lag days or weeks. Filename changes plus sitemap redeploy help. Social preview cache is a different system. See social preview cache for OG images, not favicons.

Step-by-step - roll out a new favicon without stale tabs

1. Export the full icon set from your master art. Sizes in the Favicon Sizes Guide.
2. Choose new file names or version suffix for every changed asset.
3. Update all link tags in every layout template. Copy from Favicon HTML Link Tags Example.
4. Update site.webmanifest icon src paths if manifest files changed.
5. Deploy and purge CDN caches for all icon URLs.
6. Set shorter Cache-Control on icon paths for 24-48 hours if you control headers.
7. Scan live URL with Favicon Check. Download files to confirm pixels.
8. Test in a private window and on one Android Add to Home Screen device.
9. Communicate to the team that pinned mobile icons may need re-adding.

If the scan shows new files but your desktop tab is stale, the issue is local browser favicon store, not the server.

When cache is not the problem

Avoid cache busting loops when HTML paths are wrong. Fix paths first.

HTTP headers for favicon assets

Recommended steady-state headers:

Content-Type: image/png
Cache-Control: public, max-age=604800, immutable

For ICO:

Content-Type: image/x-icon

For manifest:

Content-Type: application/manifest+json

Wrong MIME types cause some clients to skip updates entirely, which looks like a cache issue but is a server config bug.

Team workflow tips

• Document icon file names in your design system
• Include favicon paths in deploy checklists
• Run Favicon Check in CI or manual QA for production URLs
• Avoid overwriting /favicon.ico in place during high-traffic launches

Developers see new icons after purging cache. Non-technical stakeholders may not. Filename versioning is the most inclusive fix.

Monitoring favicon cache during a rebrand

Treat favicon deploys like any static asset release with observability:

• Log CDN purge requests for every icon path, not only HTML
• Hit each icon URL with curl -I after purge and confirm Age: 0 or fresh ETag
• Scan production with Favicon Check from two networks (office Wi-Fi and mobile LTE) to catch regional CDN drift
• Keep a rollback filename ready (favicon-pre-rebrand.ico) if the new art fails contrast checks after wide release

Document the exact timestamp when marketing may announce the rebrand. Support tickets about "wrong tab icon" often arrive before HTML cache clears. Point stakeholders to filename versioning instead of repeated hard refreshes that only fix one browser profile.

Staging environments should use different icon file names than production so testers never confuse cached production tabs with staging deploys. Never copy production Cache-Control: immutable headers to a staging domain that reuses /favicon.ico for experiments.

FAQ

Why does my favicon not update after hard refresh?

Hard refresh reloads the document. Browsers often keep the favicon bitmap in a separate cache keyed by icon URL.

How long do browsers cache favicons?

There is no single TTL. It varies by browser and headers. Treat favicons as long-lived unless you version file names.

Does renaming favicon.ico fix cache issues?

Yes. A new URL forces a new fetch. Update every link tag and keep a redirect from the old path if needed.

Do query strings bust favicon cache?

Often yes for browsers and CDNs. Less reliable for every crawler. Prefer filename versioning.

Why is my Android home screen icon still old?

Home screen shortcuts cache manifest icons locally. Remove the shortcut and add again after updating manifest PNGs.

Can I force all users to see a new favicon instantly?

Not globally. You can maximize uptake with new URLs, CDN purge, and short cache headers during rollout.

Does Favicon Check bypass cache?

It fetches your live URLs with a normal HTTP client. If CDN serves stale bytes, the tool shows stale bytes. That is valuable proof the edge cache needs purging.

Is favicon cache the same as Open Graph cache?

No. OG images use social crawler caches. Favicons use browser tab stores. Fix both separately for a full rebrand.

Bottom line

Browsers cache favicons aggressively by URL. Overwriting files in place causes stale tab icons even when HTML is correct. Version file names, update every tag, purge CDN paths, and verify with Favicon Check. For HTML templates and manifest paths, use Favicon HTML Example and Web App Manifest Icons Explained.