20

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.

Mr. J
  • 1,524
  • 2
  • 19
  • 42
Liver
  • 363
  • 1
  • 3
  • 19
  • Have you replace the file name in the link path on index.html? – vitomadio Aug 23 '18 at 21:40
  • Yes I have. Still no update! I've also tried clearing the offline service worker by accessing `chrome://serviceworker-internals/`. – Liver Aug 24 '18 at 12:52

4 Answers4

51

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.

Mr. J
  • 1,524
  • 2
  • 19
  • 42
24

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.

Sam Cross
  • 258
  • 2
  • 4
1

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

  1. Rename your original favicon.ico image to something else e.g. '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

sumedha
  • 31
  • 2
0

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

Douglas P.
  • 560
  • 4
  • 19