Favicon in React will not Update

Question

I cannot update the favicon in react boilerplate.

I replaced the file in images/app/favicon.ico with my own file, but I'm still seeing the old icon show up.

I cleared my browser cache, ran npm run build:clean , and npm run build .

Can't get my new favicon to render. Please advise how to update the favicon.

Answer 1

The problem is that the browser is holding onto the old image in the cache and not updating it.

To solve this problem update the favicon url to %PUBLIC_URL%/favicon.ico?v=2

The ?v=2 at the end will force the browser to refresh the favicon.

See How do I force a favicon refresh? for more details.

Answer 2

I actually just discovered an easier way to force a refresh of the icon. Tested and working in Firefox.

Simply navigate to the address of the favicon.ico file. If this page shows the old icon, just press Ctrl+F5 to refresh without cache. Then reload your original site.

Answer 3

I had same issue I solved just by renaming my image.

1. Rename your original favicon.ico image to something else eg 'old_fevicon.ico'
2. Rename your own icon or image as 'favicon.ico'.
3. If it is any image it will show blank in folder but it will render on browser properly don't worry.

Follow screenshot for this enter image description here

Answer 4

For me just doing an "Empty Cache and Hard Reload" (right-click the reload page icon and select that option) did the trick.