為網站設置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" /><link rel="icon" href="http://example.com/image.ico" /><link rel="icon" type="image/vnd.microsoft.icon" href="http://example.com/image.ico" /><link rel="icon" type="image/png" href="http://example.com/image.png" /><link rel="icon" type="image/gif" href="http://example.com/image.gif" /><link rel="icon" type="image/x-icon"href="http://example.com/image.ico"/>favicon.ico?located in the website's rootprecedence: prefer root or (X)HTML linked version

Yes[4]	Yes[4][19]	Yes[4]	Yes[4]	Yes
Yes	Yes (from IE 11)[20]	Yes	Yes	Yes
Yes	Yes (from IE 9)[20]	Yes	Yes	Yes
Yes	Yes (from IE 11)[20]	Yes	Yes	Yes
Yes	Yes (from IE 11)[20]	Yes	Yes	Yes
Yes[4]	Yes (from IE 9)[26]	Yes[4]	Yes[4]	Yes
Yes	Yes	Optional[27]	Optional[28]	Yes
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

轉載于:https://www.cnblogs.com/shinnyChen/p/3722529.html

總結

以上是生活随笔為你收集整理的favicon支持的图片格式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。