React Favicon Not Updating? Here's the Fix
You swapped the file and the tab kept the old icon. In a React app that's the browser caching the favicon, or the build output and CDN still serving the previous copy from public/.
Check the served file, then the cache
Open /favicon.ico directly. If it still shows the old image, the build didn't pick up your new file: the dev server or the deploy is serving a stale copy from public/, and clearing the browser cache won't help.
If the direct URL is correct but the tab isn't, it's the browser. Favicons are cached hard and independently of the page, so a normal refresh often isn't enough.
Clear it in order
- 1
Version the link or hard-refresh
Change the href to /favicon.ico?v=2 so the browser treats it as a new file, then hard-refresh in a private window.
- 2
Restart the dev server or rebuild
Dev servers frequently serve a cached public/ file until restarted. In production, rebuild so the new file lands in the output.
- 3
Purge the CDN
If a CDN fronts the site, invalidate the favicon path so edge nodes stop handing out the old bytes.
React favicon not updating: FAQ
Why isn't my React favicon updating?
Either the build is still serving the old file (check /favicon.ico directly) or the browser cached it. Restart the dev server or rebuild for the former; version the URL and hard-refresh for the latter.
How do I force the favicon to refresh?
Append a version query string to the icon href, e.g. /favicon.ico?v=2, then hard-refresh or open a private window. Changing the URL is what makes the browser fetch a fresh file.
It changed in dev but not after deploy.
The deploy is serving a cached copy from the build or CDN. Confirm the new file is in the build output, then purge the CDN path and re-open the direct URL.