favicon not loaded after firebase deployment

Question

Hi is there any reason why favicon.ico is not loaded in deployed site ?

I have in my index.html head

<link rel="icon" href="images/favicon.ico" />

When loading the index.html from my public dir the icon loads fine.

However after 'firebase deploy' the icon does not load.

Any help ?

Answer 1

For some reason having the icon in a sub dir failed. Moving it to the root directory solved this issue.

Answer 2

The answer is just wait for a while, or using another web browser. I just had the same thing with Chrome, but the icon is displayed well on Firefox or Brave. Happy coding!

Answer 3

The issue occurs because your browser cached the old icon and still displays it. Hard reload your webpage to fix, in Chrome cmd+shift+R #mac OR ctrl+shift+R # windows/Linux

Answer 4

You may try below:

Your icon should be inside the public folder:

yourproject_name/public/favicon.ico

and use this in your index.html file

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

Happy coding!