Favicon does not appear

Question

I'm trying to add a favicon in HTML, I have seen a video about it and this code works perfectly in the video:

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

However, it does not work in my case:

What am I doing wrong?

You can get the files I'm using from here in case you need them (it includes the icon)

Check this out: https://stackoverflow.com/questions/16375592/favicon-not-showing-up-in-google-chrome — Zachary McGee, Nov 20 '19 at 22:28
Ok, so I have checked it, I put `````` and ``````inside the header, I have cleaned the cache and nothing. I have the same issue in other browsers as well (I have tried with Edge and IE) and there's no icon in any of them... How weird! — , Nov 20 '19 at 22:40
Sorry, I have no other suggestions, I have had favicon problems before but they are usually related to cache. Good luck, hopefully someone else can help. — Zachary McGee, Nov 20 '19 at 22:43
Is `images` on the document root? If so, and your file `text.html` is within a subfolder, you may be referencing it incorrectly. Try having `href="/images/favicon.ico"` — Rylee, Nov 20 '19 at 22:45
Yes, of course. I tried it with a `````` in the body and the icon showed up. — , Nov 20 '19 at 22:48
Could you check your console and see if you are getting any error? perhaps a `404`? — Libra, Nov 20 '19 at 22:51
Check this: https://i.imgur.com/y07hvKR.png (`````` doesn't even appear inside the header on the Chrome Inspect Tool) and I don't see any error in the console. — , Nov 20 '19 at 22:53
Ooops sorry, `````` has confused me. Yes, it does appear: https://i.imgur.com/68JHXGW.png — , Nov 20 '19 at 22:57
Have you tried serving the html? Like with node, apache, nginex, or something along those lines? — CoderLee, Nov 20 '19 at 23:36

Snuwerd · Accepted Answer · 2019-11-20T23:27:44.603

1

It doesn't work, because in your code you wrote <header> instead of <head> and </header> instead of </head>.

It should be like this:

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

edited Nov 20 '19 at 23:27

answered Nov 20 '19 at 23:27

Snuwerd

1

Oh, finally! This answer has worked. @Tijani already told me that it should be inside `````` but still the icon did not show up with his/her code. Yours works well, thanks! :) – Nov 20 '19 at 23:31

Tijani · Answer 2 · 2019-11-20T23:21:50.457

0

I think the best way to do this by adding the icon like so

<link type="image/x-icon" href="favicon.ico" />

PS:the favicon.ico should be in the root of your project directory :)

edited Nov 20 '19 at 23:21

answered Nov 20 '19 at 22:46

Tijani

Nope, I don't understand what's going on. I can't even see it inside the header on the Chrome Inspect Tool: https://i.imgur.com/y07hvKR.png – Nov 20 '19 at 22:52
Ooops sorry, `````` has confused me. Yes, it does appear: https://i.imgur.com/68JHXGW.png – Nov 20 '19 at 22:57
Glad to know Adrian – Tijani Nov 20 '19 at 22:59
I mean, it does appear on the Chrome Inspect Tool but the icon still does not show up in the tab. – Nov 20 '19 at 23:01
Oh, it should be in the tag like so : The relod with ctrl + shift r – Tijani Nov 20 '19 at 23:02
Nope... https://i.imgur.com/MKU2JOc.png. Really, this is so weird. – Nov 20 '19 at 23:05
can I see your directory structure – Tijani Nov 20 '19 at 23:10
Yes, I have it inside a folder named "test" in the desktop and this is the structure: https://i.imgur.com/QCOZSbS.png also, a file ```debug.log``` is created each time I open the html file through Chrome and it contains all this: https://i.imgur.com/kIZJfVd.png. I think these lines are telling us that there's an error or something when trying to load the icon. – Nov 20 '19 at 23:14
The favicon.ico should be in the root of the directory – Tijani Nov 20 '19 at 23:20
Omg, that didn't work either. Maybe my computer is broken or something haha. See: https://i.imgur.com/MbGcy3w.png Do you think the icon might be the issue maybe? Should I try with another one? – Nov 20 '19 at 23:26
Ok, the issue was your code. Snuwerd's one has worked for me! Thanks for the help!! :) – Nov 20 '19 at 23:32

2 Answers2