The ICO file format is an image file format for computer icons in Microsoft Windows. ICO files contain one or more small images at multiple sizes and color depths, such that they may be scaled appropriately.
When you add a favicon to your site, it may not show up since your browser has 'saved' your site as one without a favicon. You need to clear the cache in your browser or use a different browser.
Favicon images are small in size, only 16 pixels in height by 16 pixels in width, so there is not much space for complex designs. Still, a good favicon that is clean, simple and easily identifiable can provide a good visual indicator for visitors navigating to your site through their tabs or bookmarks.
When you're serving an .ico file to be used as a favicon, it doesn't matter. All major browsers recognize both mime types correctly. So you could put:
<!-- IE -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<!-- other browsers -->
<link rel="icon" type="image/x-icon" href="favicon.ico" />
or the same with image/vnd.microsoft.icon
, and it will work with all browsers.
Note: There is no IANA specification for the MIME-type image/x-icon
, so it does appear that it is a little more unofficial than image/vnd.microsoft.icon
.
The only case in which there is a difference is if you were trying to use an .ico file in an <img>
tag (which is pretty unusual).
Based on previous testing, some browsers would only display .ico files as images when they were served with the MIME-type image/x-icon
. More recent tests show: Chromium, Firefox and Edge are fine with both content types, IE11 is not. If you can, just avoid using ico
files as images, use png
.
I think the root for this confusion is well explained in this wikipedia article.
While the IANA-registered MIME type for ICO files is image/vnd.microsoft.icon, it was submitted to IANA in 2003 by a third party and is not recognised by Microsoft software, which uses image/x-icon instead.
If even the inventor of the ICO format does not use the official MIME type, I will use image/x-icon
, too.
I have noticed that when using type="image/vnd.microsoft.icon"
, the favicon fails to appear when the browser is not connected to the internet.
But type="image/x-icon"
works whether the browser can connect to the internet, or not.
When developing, at times I am not connected to the internet.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With