什么是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">