Favicon not updating after build in Create React App

[Codex1ntech]

Hello, I’m using Create React App for a small project and I replaced the default favicon in the public/ folder with my own favicon.ico.

It shows up correctly in local development (npm start), but after I build and deploy it to Netlify, the old CRA favicon still appears. I’ve tried clearing the browser cache and even renaming the file, but no luck.

I made sure to replace the file inside public/favicon.ico and I confirmed it’s in the build output.

Is there something specific I need to do to force the new favicon to show after deployment?

Thanks in advance! pls

[weyniis]

I ran into this same issue a while back, the favicon thing can be surprisingly annoying in CRA.

What’s likely happening is that the browser is aggressively caching ur old favicon, especially if u had already visited the site before updating it.

Here are a few things u can try:

1. Rename the favicon file entirely
   Instead of keeping favicon.ico, try naming it something like favicon-new.ico and update ur public/index.html like this:

   <link rel="icon" href="%PUBLIC_URL%/favicon-new.ico" />

2 Make sure ur deployment clears old cache
If u're using Netlify, try a “hard” deploy (clear cache & deploy), or trigger a fresh deploy from a clean build.

3 Force reload with meta tags (optional)
Some people add a meta tag to force fresh cache busting:

Use Chrome’s DevTools to confirm
Open DevTools → Network tab → Check “Disable cache” and reload ur site. If the new favicon appears, it’s a caching issue for sure.

Once it starts appearing on one browser or device, it usually propagates after a while. It’s frustrating but fairly common in CRA deployments

Hope this helps

[Codex1ntech]

I didn’t even think of renaming it! Will try that now thankyou