HTML Favicon Not Working

Question

I've got <link rel="icon" type="image/png" href="myimage.png" />, why doesn't it work? It gives me the blank/new document icon in the favicon.

Does it have to be an icon.
Does it have to be from a URL?

It worked previously but it's stopped now, I might have changed something, but I don't think so, I didn't update anything, add any gadgets or anything, it just stopped working.

I have tried a few things such as using URL or an .ico instead of PNG, and I've looked online too, but I can't figure it out. It could be because I'm hosting the site file in a google drive sync but I doubt it somehow.

Thanks. In case anybody needed it, I've got the code on paste bin: http://pastebin.com/Wzc9zLea << HTML and CSS

Not sure if it's related, but you really should not have `` tags around your HTML code. — Ruben Martinez Jr., Aug 19 '14 at 00:09
And where's your closing `` tag? Looks to me like you have quite a bit of syntax problems that may or may not be causing the issue. You should double check your syntax. — Josiah, Aug 19 '14 at 00:15
I noticed that you're linking to `adzerk`? I find it more likely it has to do with that than what kind of image you're using. By the way, what does careers 2.0 have to do with your website? — , Aug 19 '14 at 00:17

score 0 · Answer 1 · edited May 23 '17 at 12:29

0

You need to meet the specifications => PNG/GIF/ICO, 8- or 24-bit colors, and size 16x16 or 32x32, which your image doesn't meet at all. By the way, why do you wrap your code with <a> tags?

P.S. - You might want to remove 'shortcut.'

edited May 23 '17 at 12:29

Community

1
1

answered Aug 19 '14 at 00:20

Shahar

1,703
2
11
18

score 0 · Answer 2 · edited May 23 '17 at 12:29

To answer your questions, whether it has to be an icon–I think you mean whether it has to be a .ico or a .png file, and that depends on the browser. As a general rule, most of the time it can be a png, no problem. For much more detail, check out this SO answer.

As for whether it has to be "from a URL", that's tough to give a yes/no answer to because it's a bad question. If you mean, does it have to be from an external URL accessed via the HTTP protocol, then no, it doesn't. It can be a file path and that works just fine. Anything that requires a URL will generally take a file path no problem.

Side notes:

As I mentioned in my comment, there's no need to wrap your code in <a> tags, and it may be screwing with your code.
Some people are saying you don't have a closing <head> tag, but I see it just fine, so not sure what that's all about.

score 0 · Answer 3 · answered Aug 19 '14 at 00:28

0

Your favicon should be saved as a .ico filetype. Place the NAME.ico in the root of wherever your website is. You can go to this site http://www.favicon.cc/ and have your .png made into a favicon. Then just put it into the root and you're set.

answered Aug 19 '14 at 00:28

racecarjonathan

1,210
1
11
21

score 0 · Answer 4 · answered Aug 19 '14 at 00:52

It varies depending on the browser and these days the device (tablet, smartphone, etc). But at a minimum, your favicon link should be constructed as follows:

<link rel="icon" 
  type="image/png" 
  href="http://example.com/myicon.png">

Currently, your file reference is relative to URI, meaning that if you have pages deeper than one level below your document root, your code is going to break. To illustrate, here's an example:

If you visit http://example.com, the browser will look for your favicon file at http://example.com/myicon.png.

If you visit http://example.com/mycategory/myarticle.html, the browser will look for your favicon file at http://example.com/mycategory/myicon.png, which won't be found.

See the problem? So either use an absolute path to your favicon file:

<link rel="icon" 
  type="image/png" 
  href="http://example.com/myicon.png">

or make the path relative to your document root:

<link rel="icon" 
  type="image/png" 
  href="/myicon.png">

Looking at the HTML you posted, another obvious problem that stands out is poorly structured (invalid) HTML. Remove the first four lines in your HTML document:

1. HTML
2. <a>
3. <!DOCTYPE html>
4.

The first line is just text and will confuse browsers trying to determine the document type of the page being loaded. The second line is a valid HTML element but it needs to exist within parent

<html>
  <body>
  ...
  </body>
</html>

elements. The third line isn't a valid declaration and looks like a stab in the dark, and the fourth is a blank line. If you don't actually know what HTML standard you're coding to, it's probably best to simply omit the DOCTYPE declaration and simply let the browser guess the standard to use because this WILL affect how your HTML is interpreted (and rendered). I don't know if it's universally true, but I think most browsers will fall back to the loosest HTML standard in the absence of a defined DOCTYPE.

One final thought. If you're new to HTML and/or don't have any sort of formal education/training, take some time to go through online tutorials. http://www.w3schools.com is a basic resource that can help you better understand the language.

HTML Favicon Not Working

4 Answers4