favicon支持的图片格式

为网站设置favicon有两种方式:

1、网站根目录下放置名为favicon.ico的图片,浏览器就会自动获取;

2、在页面中通过<link rel="shortcut icon"  href="http://example.com/myicon.ico" />.

 

对于favicon来说,一般都是使用ico格式,不过对于根目录的favicon图片chrome、firefox、IE11等现代浏览器都支持PNG、GIF(无动画)格式。对于通过link来设置的favicon格式,IE7+、现代浏览器都支持PNG、GIF格式,不过在IE7下图片效果会很差。

对于苹果设备,我们可以通过在head里写入<link rel="apple-touch-icon" href="somepath/image.png" />、<link rel="apple-touch-icon-precomposed" href="somepath/image.png" />来设置。

 

 Google ChromeInternet ExplorerFirefoxOperaSafari
<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.ico located 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] ? ?

 

参考文档:

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

posted @ 2014-05-11 23:24  shinnyChen  阅读(5000)  评论(1编辑  收藏  举报