IE10 +的有效網站圖標類型是什么？

Question

我所說的文件擴展名。

我的網站圖標適用於FF，Chrome和Safari，提示中有人可能是導致此問題的網站圖標類型。

一般來說，在線上是否有很好的資源可以為我提供此信息？

我對尋找准確的文檔更感興趣，而不是僅僅嘗試不同的類型。

如果可能，我寧願使用.svg文件，而不是柵格圖像。 另外，由於我使用Inkscape，因此無法生成.ico文件。

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

研究

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

Favicon無法在IE中工作

請注意，我不想將其放在根文件夾中。

根據規范，我違反了規范，因此IE可以正常工作。

實際上，我違反了IE的規范，但它仍然無法正常工作。

為什么討厭我？

Answer 1

在此處輸入鏈接描述。上傳260px X 260px的圖片后，網站將創建所有各種圖標和代碼。 然后，在平板電腦和移動設備上，當您保存書簽時，它看起來像設備示例上的應用程序圖標https://realfavicongenerator.net/favicon_checker?site=http%3A%2F%2Fnationalkitchencabinets.com%2F&ignore_root_issues=on#.V0yL- 77PS

該頁面將為您提供類似的代碼，以發布到頁面的''頂部。 然后，將它提供的所有圖標放入網站的根目錄。

<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">

Answer 2

這是您可以在任何地方使用的網站圖標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" />

在這里查看更多信息

Answer 3

ICO文件格式由Microsoft在Windows的第一版中表示，通常不是圖像格式，而是BMP和PNG圖像的容器。 因此，實際上應該至少在其中包含BMP / PNG圖像。

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

您可以在此處找到“ Favicon”受支持的圖像格式的表格： https : //en.wikipedia.org/wiki/Favicon

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

ISO格式的主要思想是將不同大小的圖像圖標打包：16x16px（這是主要圖標，在瀏覽器中用作Favicon），32x32、64x64等文件合並為一個文件，因此看起來像是“ ICO”不錯，在不同的分辨率。 您可以輕松地找到大量的在線工具，這些工具幾乎可以將任何格式轉換為ICO，但是在大多數情況下，幾乎所有工具都只能創建一張圖像（16x16px）。