Favicon Not Updating? Fix the Cache First
A favicon that will not update is almost always a cache, not a bug. Confirm the file actually changed first, then bust caches from the file outward.
Check the file before you touch the browser
Favicons are cached aggressively at every layer: the browser, your CDN, and sometimes a stale build artifact. Before you blame the browser, find out which layer is serving the old image.
Go straight to the file. Open https://yoursite.com/favicon.ico in the address bar and look at what loads. If it is the old icon, your browser is not the problem, the server or CDN is still handing out the previous file. If it is the new icon, the file shipped fine and only your browser cache is behind.
Work from the file outward
- 1
Open the icon URL directly
Load /favicon.ico and each PNG path in the address bar. Old image at the URL means a server, build, or CDN cache. New image at the URL means only your browser is stale, skip to the browser steps.
- 2
Add a version query to the tag
A query string makes the URL look new, so caches fetch a fresh copy. Bump the number every time the icon changes. This is the single most reliable browser-cache fix.
- 3
Hard-refresh in a private window
A private or incognito window ignores your normal favicon cache. Combine it with a hard refresh so you are testing the deployed file, not a local copy.
- 4
Purge the CDN and clear a stale build
If the old image is still at the URL, purge the icon paths at your CDN or edge cache, then confirm your build actually copied the new files. A cached build artifact will keep shipping the old icon until you clear it and rebuild.
The version query
<link rel="icon" href="/favicon.ico?v=2" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=2">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=2">Bump ?v= each time the icon changes. Same file path, new URL, so browser and CDN caches treat it as a fresh asset.
Common questions
Why is my favicon not updating after I changed it?
A cache is serving the old file. Open /favicon.ico directly: old image there points to a CDN or build cache, new image there points to your browser cache. Fix the layer that is actually stale.
How do I force a browser to reload the favicon?
Add a version query string like /favicon.ico?v=2 to the link tag and bump it on each change, then hard-refresh in a private window. That is the most dependable way to make the browser fetch a fresh copy.
How long until the favicon updates on its own?
It depends on your cache lifetimes. Without a version query it can take hours or longer, since browsers and CDNs hold icons for a long time. A version query makes the change take effect on the next load.
My favicon updated everywhere except iOS home screen. Why?
Saved iOS shortcuts freeze the icon at the time they were added. Delete the shortcut and re-add the page to pick up the new apple-touch-icon.