什麼是IE10 +有效的favicon類型？

Question

按類型我的意思是文件擴展名。

我的favicon適用於FF，Chrome和Safari，有人建議可能是導致此問題的圖標類型。

更普遍的是有一個很好的資源在線，會給我這些信息？

我比僅僅嘗試不同的類型更感興趣找到準確的文檔。

如果可能，我寧願使用.svg文件而不是光柵圖像。此外，我沒有辦法生成.ico文件，因爲我正在使用Inkscape。

<link rel='shortcut icon' href = '../images/favicon.png'> 

研究

https://mathiasbynens.be/notes/rel-shortcut-icon

favicon not working in IE

請注意，我不不想把它的根文件夾。

根據規範我打破規範，所以IE瀏覽器將工作。

實際上我打破IE的規範工作，它仍然無法正常工作。

爲什麼它會恨我？

Answer 1

這是圖標types你可以使用無處不在：

<link rel="icon" type="image/x-icon" href="http://example.com/favicon.ico" /> 
<link rel="icon" type="image/png" href="http://example.com/favicon.png" /> 
<link rel="icon" type="image/gif" href="http://example.com/favicon.gif" /> 

網站圖標的完整列表，可以是這樣的：

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/apple-touch-icon-57x57.png" /> 
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="/apple-touch-icon-60x60.png" /> 
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72.png" /> 
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/apple-touch-icon-76x76.png" /> 
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114.png" /> 
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/apple-touch-icon-120x120.png" /> 
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144.png" /> 
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/apple-touch-icon-152x152.png" /> 
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196" /> 
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" /> 
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" /> 
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" /> 
<link rel="icon" type="image/png" href="/favicon-128.png" sizes="128x128" /> 
<meta name="application-name" content="Site"/> 
<meta name="msapplication-TileColor" content="#FFFFFF" /> 
<meta name="msapplication-TileImage" content="/mstile-144x144.png" /> 
<meta name="msapplication-square70x70logo" content="/mstile-70x70.png" /> 
<meta name="msapplication-square150x150logo" content="/mstile-150x150.png" /> 
<meta name="msapplication-wide310x150logo" content="/mstile-310x150.png" /> 
<meta name="msapplication-square310x310logo" content="/mstile-310x310.png" /> 

查看更多信息here

Answer 2

ICO文件格式由Microsoft在第一版Windows中代表，並且通常不是圖像格式，而是用於BMP和PNG圖像的容器ES。所以它實際上應該包含BMP/PNG圖像，至少有一個。

來源：https://en.wikipedia.org/wiki/ICO_%28file_format%29

你可以找到支持的圖像格式的表 「網站圖標」 在這裏： https://en.wikipedia.org/wiki/Favicon

SVG支持僅FF 41.0+。 （理論上）

ISO格式背後的主要思想是將圖像圖標以不同的大小打包：16x16px（這是主要的，在瀏覽器中用作Favicon），32x32,64x64等等放入一個文件，所以這個「ICO」在不同的分辨率下看起來不錯。您可以輕鬆找到大量的在線工具，它們幾乎可以將任何格式轉換爲ICO，但幾乎所有這些工具在大多數情況下只會創建一個圖像（16x16像素）。

Answer 3

轉到enter link description here上傳260px X 260 px圖像後，網站會創建所有各種圖標和代碼。然後在平板電腦上，當你保存它看起來像一個應用程序圖標的書籤您的設備 例如在moobile設備https://realfavicongenerator.net/favicon_checker?site=http%3A%2F%2Fnationalkitchencabinets.com%2F&ignore_root_issues=on#.V0yL-77PSSo

的頁面會給你像這樣的代碼在你的頁面的'頂部張貼。然後將它提供的所有圖標放入網站的根目錄中。

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"> 
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"> 
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"> 
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"> 
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"> 
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"> 
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"> 
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"> 
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"> 
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> 
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"> 
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> 
<link rel="manifest" href="/manifest.json"> 
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> 
<meta name="msapplication-TileColor" content="#da532c"> 
<meta name="msapplication-TileImage" content="/mstile-144x144.png"> 
<meta name="theme-color" content="#ffffff">