45

The following is used to set the favicon in my html code:

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

However, the icon does not show. Why?

Note:

I have confirmed that the file is on-disk at the correct path.

4
  • Try including the URL in the question. The odds are that the file just isn’t there, at the indicated address. The type attribute value is wrong (not a valid Internet media type), but it probably has no effect. Commented Mar 16, 2013 at 9:42
  • 3
    Answering as a comment because the question is closed: Favicons only work when served from a web-server which sets mime-types correctly for served content. Loading from a local file or from a dumb web-server simply will not work (bugs.chromium.org/p/chromium/issues/detail?id=51270) . If you want a reliable favicon for local development your best bet is to inline it (stackoverflow.com/questions/5199902/…).
    – timthelion
    Commented Feb 20, 2018 at 17:05
  • 1
    See meta.stackexchange.com/questions/307182/…
    – timthelion
    Commented Feb 20, 2018 at 17:05
  • @timthelion Looks like the floodgates have been opened. Feel free to post your comment as an answer. Hopefully we won't see a deluge of rubbish answers. PS Don't forget to @reply when commenting so users get notified. See How do comment @replies work? in the FAQ for the full details on how they work.
    – robinCTS
    Commented Feb 21, 2018 at 5:16

4 Answers 4

69
  1. Is it really a .ico, or is it just named ".ico"?
  2. What browser are you testing in?

The absolutely easiest way to have a favicon is to place an icon called "favicon.ico" in the root folder. That just works everywhere, no code needed at all.

If you must have it in a subdirectory, use:

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

Note the / before img to ensure it is anchored to the root folder.

4
  • 4
    Quite often, an author has no access to server root; thus, far from being absolutely easiest, that way can be impossible. Commented Mar 16, 2013 at 9:40
  • 5
    Must admit that I've never had a server without the root directory being accessible - that sounds awful! Commented Mar 16, 2013 at 9:45
  • @Jukka is right in the case of Java web applications. While in other ways they are completely independent of each other, they are typically deployed to their servlet container (e.g. Tomcat) such that they appear as as root-level "subdirectories" under the same host name, and the HTML author usually has no knowledge of what the installer will decide to call each of them. Commented Apr 20, 2015 at 3:13
  • 2
    I think its worth noting that sometimes favicons are heavily cached by the browser. After add the <link> tag, try viewing the page source and clicking the href= link. This will let you see if the link is correct.
    – rideron89
    Commented Feb 19, 2018 at 15:39
10

Try this:

<link href="img/favicon.ico" rel="shortcut icon" type="image/x-icon" />
2
  • i'm sure you've probably tried this, but try clearing your browser cache. sometimes favicons can be pretty sticky. Commented Mar 16, 2013 at 8:29
  • try placing image in root of your application,and access it by href="~/favicon.ico"
    – Cris
    Commented Mar 16, 2013 at 8:29
7

Favicons only work when served from a web-server which sets mime-types correctly for served content. Loading from a local file might not work in chromium. Loading from an incorrectly configured web-server will not work.

Web-servers such as lighthttpd must be configured manually to set the mime type correctly.

Because of the likelihood that mimetype assignment will not work in all environments, I would suggest you use an inline base64 encoded ico file instead. This will load faster as well, as it reduces the number of http requests sent to the server.

On POSIX based systems you can base64 encode a file with the base64 command.

To create a base64 encoded ico line use the command:

$ base64 favicon.ico --wrap 0

And insert the output into the line:

<link href="data:image/x-icon;base64,HERE" rel="icon" type="image/x-icon" />

Replacing the word HERE like so:

<link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAA////AERpOgA5cCcA7vDtAF6jSABllFcAuuCvAK2trQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFjMzMzMzNxARYzMzMzVBEEERYzMzNhERZxRGMzZxQEA2FER3cRSAgTNxgEEREIQBMzFIARERFEEzNhERARFAATMzYREBEAhBMzMzEYEBFEEzMzNhEQQRQDMzMzcRgEAAMzMzNhERgIEzMzMyERgEQDMzMzMRAEgEMzMzMxERAEEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" rel="icon" type="image/x-icon" />
1
  • Really nice solution. Thanks!
    – Bogdan M.
    Commented Jun 21, 2018 at 10:22
-1

Try adding the profile attribute to your head tag and use "image/x-icon" for the type attribute:

<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon" type="image/x-icon" href="img/favicon.ico">

If the above code doesn't work, try using the full icon path for the href attribute:

<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon" type="image/x-icon" href="http://example.com/img/favicon.ico">
2
  • 1
    Adding the profile won't make any difference - and it's not valid HTML anymore. Your edit makes things clearer. The issue is likely that he's missing a / before img. Commented Mar 16, 2013 at 8:36
  • It should also be noted, according to the Wikipedia page on Favicon, rel="icon" type="image/x-icon" is only compatible with Internet Explorer 9+ , where rel="shortcut icon" (as shown above in the accepted answer) is compatible with pretty much all versions of Internet Explorer. Commented Jan 5, 2015 at 5:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.