Html IE10+；的有效favicon类型是什么；？_Html_Internet Explorer_Favicon

Html IE10+；的有效favicon类型是什么；？

html internet-explorer

Html IE10+；的有效favicon类型是什么；？,html,internet-explorer,favicon,Html,Internet Explorer,Favicon,我所说的类型是指文件扩展名我的favicon适用于FF、Chrome和Safari，有人在中建议可能是favicon类型导致了问题一般来说，网上有没有好的资源可以提供这些信息我更感兴趣的是找到准确的文档，而不是简单地尝试不同的类型如果可能的话，我更喜欢使用.svg文件，而不是光栅图像。另外，在使用Inkscape时，我没有生成.ico文件的方法 <link rel='shortcut icon' href = '../images/favicon.png'> 研究

我所说的类型是指文件扩展名

我的favicon适用于FF、Chrome和Safari，有人在中建议可能是favicon类型导致了问题

一般来说，网上有没有好的资源可以提供这些信息

我更感兴趣的是找到准确的文档，而不是简单地尝试不同的类型

如果可能的话，我更喜欢使用.svg文件，而不是光栅图像。另外，在使用Inkscape时，我没有生成.ico文件的方法

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

研究

请注意，我不想把它放在根文件夹中

根据规范，我正在破坏规范，所以IE可以工作

事实上，我打破了IE的工作规范，但它仍然不起作用

为什么它讨厌我？

这是favicon

类型，您可以在任何地方使用：
<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" />  



Favicon的完整列表可以是这样的：
<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" />



查看更多信息
这是favicon类型
您可以在任何地方使用：
<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" />  



Favicon的完整列表可以是这样的：
<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" />



请参阅更多信息
ICO文件格式由Microsoft在Windows的第一个版本中表示，通常不是图像格式，而是BMP和PNG图像的容器。所以它实际上应该包含BMP/PNG图像，至少一个
资料来源：
您可以在此处找到“Favicon”支持的图像格式表：

SVG仅在FF 41.0+上受支持。（理论上）
ISO格式背后的主要思想是将不同大小的图像图标打包到一个文件中：16x16px（这是主图标，在浏览器中用作Favicon）、32x32、64x64等等，这样这个“ICO”就可以在不同分辨率下看起来不错。你可以很容易地找到大量的在线工具，这些工具几乎可以将任何格式转换为ICO，但在大多数情况下，它们几乎都只能创建一个16x16px的图像
 ICO文件格式由Microsoft在Windows的第一个版本中表示，通常不是图像格式，而是BMP和PNG图像的容器。所以它实际上应该包含BMP/PNG图像，至少一个
资料来源：
您可以在此处找到“Favicon”支持的图像格式表：

SVG仅在FF 41.0+上受支持。（理论上）
ISO格式背后的主要思想是将不同大小的图像图标打包到一个文件中：16x16px（这是主图标，在浏览器中用作Favicon）、32x32、64x64等等，这样这个“ICO”就可以在不同分辨率下看起来不错。你可以很容易地找到大量的在线工具，这些工具几乎可以将任何格式转换为ICO，但在大多数情况下，它们几乎都只能创建一个16x16px的图像 上传一张260px X 260 px的图像后，转到该站点创建所有各种功能和代码。然后，在平板电脑和moobile设备上，当您保存书签时，它看起来就像您设备上的应用程序图标
范例
该页面将为您提供这样的代码，以便在页面的“”顶部发布。然后将它提供给你的所有图标放到网站的根目录中

上传一张260px 260 px的图像后，转到该站点创建所有各种功能和代码。然后，在平板电脑和moobile设备上，当您保存书签时，它看起来就像您设备上的应用程序图标
范例
该页面将为您提供这样的代码，以便在页面的“”顶部发布。然后将它提供给你的所有图标放到网站的根目录中

谢谢您的回答，但您能否提供一份参考资料，以便我现在可以从何处获取此信息？我是否仍然可以使用我的相对链接，还是必须将其更改为绝对链接？是的，相对很好，只是一个示例，请参阅更新的回答谢谢您的回答，但您能否提供一份参考资料，以便我现在可以从何处获取此信息？我是否仍然可以使用我的相对链接，还是必须将其更改为绝对链接？是的，相对链接很好，只是一个示例，请参阅更新的回答。另外，请参阅关于/favicon.ico路径的说明，大多数浏览器都在读取HTML标记并从中找到路径，这很好，但是一些搜索引擎，如yandex（和许多机器人）正试图直接从中打开favicon，因此无法正确索引页面的favicon。另外，请注意/favicon.ico路径，大多数浏览器都在读取HTML标记并从中找到路径，这很好，但是，一些搜索引擎，如yandex（和许多机器人）正试图直接从中打开favicon，并且将无法正确索引页面的favicon。