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.
.ico
, or is it just named ".ico"?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.
Try this:
<link href="img/favicon.ico" rel="shortcut icon" type="image/x-icon" />
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" />
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">
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
type
attribute value is wrong (not a valid Internet media type), but it probably has no effect.@reply
when commenting so users get notified. See How do comment @replies work? in the FAQ for the full details on how they work.