10

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 ?

kofifus
  • 17,260
  • 17
  • 99
  • 173
  • 1
    Check in your browser's network tab, whether it is requesting the favicon. Favicons don't immediately load. – Frank van Puffelen May 07 '16 at 00:58
  • no it does not appear in the network tab but it does show in the elements tab – kofifus May 07 '16 at 01:12
  • If it doesn't show in the network tab, the browser is not requesting it. – Frank van Puffelen May 07 '16 at 01:14
  • ok, but it does request and show it in the non deployed version ... ? – kofifus May 07 '16 at 01:33
  • also another thing I see, in the 'elements' tab I see ==$0 ... if I go the the console and type console.log($0) I get" ... this ==$0 appear next to body in the local (not deployed) version – kofifus May 07 '16 at 01:38
  • It is up to the browser to determine when it wants to show a favicon. Have a look at one of the many questions about that, e.g. http://stackoverflow.com/questions/16375592/favicon-not-showing-up-in-google-chrome, https://answers.squarespace.com/questions/7759/how-long-does-it-take-for-a-custom-favicon-to-show-up-on-your-site.html – Frank van Puffelen May 07 '16 at 03:23
  • I don't think that's the issue. I now see the browser actually fails loading the file. If I use for example: then (every time I increase the cb value, deploy and reload) I get in the network tab: 404 not found ! Any help ? – kofifus May 07 '16 at 03:47

5 Answers5

9

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

kofifus
  • 17,260
  • 17
  • 99
  • 173
8

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

lordvidex
  • 3,581
  • 3
  • 17
  • 25
1

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!

PG1
  • 1,220
  • 2
  • 12
  • 27
Kunvar Singh
  • 1,779
  • 2
  • 13
  • 21
1

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!

nambk
  • 445
  • 3
  • 13
0

I thought it was about to the domain system.

But solution is simple.

MacOS -> CMD + SHIFT + R

Windows -> CTRL + SHIFT + R

Atakan Eryıldız
  • 1
  • 1