Favicon not updating? Fix it with a cache-busting checklist

Your favicon can be "wrong" even when you deployed the correct file. Browsers cache favicons harder than most other assets.

If you want the fastest path to a correct, verifiable setup, do this first:

• Run the Favicon Checker on your live URL to see what your site serves right now.
• Generate a fresh pack with the Favicon Generator so you are not debugging a partial set of files.

The quick checklist (do these in order)

1) Confirm the path you are actually serving

Open your site HTML and verify the href values match the files you deployed. These two are not the same:

• href="/favicons/favicon-32.png"
• href="/favicon-32.png"

If you use a subfolder like /favicons, make sure:

• the files exist at that path on your server
• your snippet uses the same base path
• your framework does not rewrite the request to a different file

2) Replace the whole set, not just one icon

A common failure mode is updating favicon.ico but leaving stale PNGs (or the other way around). Many browsers will pick different icons depending on context.

If you used Favicon Generator, replace the whole pack it outputs, then paste the generated snippet again so it matches.

3) Add a cache-buster to PNG links

For PNG favicons, the most reliable "force refresh" is changing the URL. A query string is usually enough:

<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32.png?v=2025-12-14" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16.png?v=2025-12-14" />

For favicon.ico, some browsers ignore query strings. If the ICO is stubborn, rename it and update the tag:

<link rel="icon" type="image/x-icon" href="/favicons/favicon-2025-12-14.ico" />

4) Hard reload and test with a clean profile

Do not trust your daily browser profile for favicon testing.

Use at least one of these:

• Incognito/private window
• A different browser (Chrome + Firefox, for example)
• A different device

Then hard reload:

• macOS: Cmd+Shift+R
• Windows/Linux: Ctrl+Shift+R

5) Check for a service worker (PWA) serving old assets

If you have a service worker, it can keep serving old icons even after you deploy.

Quick test:

• Open DevTools
• Application tab
• Service Workers
• Unregister (or "Update on reload"), then hard reload

6) iOS: update the apple-touch-icon too

iOS uses apple-touch-icon.png for home screen icons. Updating only favicon.ico will not fix what you see when you "Add to Home Screen".

If you generated a pack, make sure you deployed apple-touch-icon.png and that your snippet includes:

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

Common reasons the icon never changes

You have two different favicon systems fighting each other

Some frameworks can serve favicons from special locations (for example, app/icon.png or app/favicon.ico in Next.js). If you also add manual <link rel="icon"> tags, you can end up updating one system while the browser uses the other.

Pick one approach and remove the leftovers.

Your server returns a non-200 status for the icon

If the icon URL returns a redirect, 404, or 403, browsers can silently fall back to a cached version.

Use the Favicon Checker to see status codes and which icon URLs are failing.

You updated the file, but the CDN kept the old cache

If you front your site with a CDN, you might need to purge cache for the favicon paths. Cache busting via URL change (query string or filename) is often faster than waiting for the TTL.

Verify the fix (do not guess)

After you make changes, run the Favicon Checker again:

• Confirm your <link> tags are detected.
• Confirm icon URLs return 200.
• Confirm dimensions look sane (no 16x16 being used as a 512x512, for example).

If you want a clean baseline, generate a new pack with the Favicon Generator, deploy it to /favicons, and paste the snippet as-is.

Related tools

• Need a fresh ICO only? Use PNG to ICO.
• Have an existing ICO and want the embedded PNGs? Use ICO to PNG.