Image formats supported by favicon

You can set favicon for a website in either of the following ways:

1. Put an image named favicon. ico in the root directory of the website, which will be automatically obtained by the browser;

2, in the page through the <link rel = "shortcut icon" href = "http://example.com/myicon.ico"/>.

 

Generally, favicon uses ico format. However, modern browsers such as chrome, firefox, and IE11 in the root directory support PNG and GIF (No animation) formats. For the favicon format set through link, IE7 + and modern browsers support PNG and GIF formats, but the effect on IE7 is poor.

For Apple devices, we can write<link rel="apple-touch-icon" href="somepath/image.png" />、<Link rel = "apple-touch-icon-precomposed" href = "somepath/image.png"/>.

 

	Google Chrome	Internet Explorer	Firefox	Opera	Safari
<link rel="shortcut icon" href="http://example.com/myicon.ico" />	Yes[4]	Yes[4][19]	Yes[4]	Yes[4]	Yes
<link rel="icon" href="http://example.com/image.ico" />	Yes	Yes (from IE 11)[20]	Yes	Yes	Yes
<link rel="icon" type="image/vnd.microsoft.icon" href="http://example.com/image.ico" />	Yes	Yes (from IE 9)[20]	Yes	Yes	Yes
<link rel="icon" type="image/png" href="http://example.com/image.png" />	Yes	Yes (from IE 11)[20]	Yes	Yes	Yes
<link rel="icon" type="image/gif" href="http://example.com/image.gif" />	Yes	Yes (from IE 11)[20]	Yes	Yes	Yes
<link rel="icon" type="image/x-icon"href="http://example.com/image.ico"/>	Yes[4]	Yes (from IE 9)[26]	Yes[4]	Yes[4]	Yes
favicon.icoLocated in the website's root	Yes	Yes	Optional[27]	Optional[28]	Yes
Precedence: prefer root or (X) HTML linked version	Linked[22]	Linked[22]	Linked[22]	?	?

 

Reference:

Http://en.wikipedia.org/wiki/Favicon

Http://msdn.microsoft.com/en-us/library/ms537656 (v = vs.85). aspx

Http://stackoverflow.com/questions/1344122/favicon-png-vs-favicon-ico-why-should-i-use-pngs-instead-of-icos

Http://www.webmasterworld.com/html/3701134.htm

Http://blogs.msdn.com/ B /ieinternals/archive/2013/09/08/internet-explorer-favicons-png-link-rel-icon-caching.aspx

Http://blogs.msdn.com/ B /jeffdav/archive/2007/03/01/why-doesn-t-the-favicon-for-my-site-appear-in-ie7.aspx