网站图标：.ico还是.png / 正确的标签？

Question

在HTML5文档中，你建议使用哪种favicon格式？并解释原因。同时，该格式需要支持IE7和所有现代浏览器。

另外，当使用.png格式时，我是否需要指定类型（type="image/png"）？

- Richard

Answer 1

为了与所有浏览器兼容，请坚持使用.ico。

然而，由于使用多个程序更容易创建，.png得到了越来越多的支持。

对于.ico格式。

<link rel="shortcut icon" href="http://example.com/myicon.ico" />

对于.png文件，您需要指定文件类型。

<link rel="icon" type="image/png" href="http://example.com/image.png" />

- Ibu

---

包含两者并让浏览器决定使用哪一个可以吗？ - ewall

谢谢。但在HTML5中，您不需要自我关闭标记，对吗？ - Richard

@Richard：在HTML5中，你可以选择是否使用自闭合标签。 - unor

@unor 那就是 type="image/x-icon"。 - Duncanmoo

“为了与所有浏览器兼容，请使用.ico格式。” 这个回答在历史深处时仍然有效, 但如今PNG格式已经可以完美兼容所有浏览器。 （这是一个在 Stack Overflow 上越来越常见的问题... 回答不总是适用于现在） - Nathan Hornby

Answer 2

看这里：跨浏览器网站图标

那就是正确的方法：

<link rel="icon" type="image/png" href="http://www.example.com/image.png"><!-- Major Browsers -->
<!--[if IE]><link rel="SHORTCUT ICON" href="http://www.example.com/alternateimage.ico"/><![endif]--><!-- Internet Explorer-->

- rudimenter

---

你认为小写的 shortcut icon 会起作用吗？（我们从来不知道IE会怎么做） - Alexandre Khoury

@Mageek 从未测试过小写字母。 - rudimenter

根据caniuse，iOS的Safari也不支持.png格式。 - dsdsdsdsd

@dsdsdsdsd Safari for iOS完全不使用网站图标，因此这不是一个问题。 - mrvautin

@mrvautin，不太对。iOS版Safari确实支持图标，但默认情况下它们是禁用的。您可以在Safari设置中启用它们。 - DanielBlazquez

微软于2022年6月15日“退役”了它的Internet Explorer。 - Dmitry Pavlov

Answer 3

我知道这是一个老问题。

这里有另一个选项-满足不同平台的要求-来源

<link rel='shortcut icon' type='image/vnd.microsoft.icon' href='/favicon.ico'> <!-- IE -->
<link rel='apple-touch-icon' type='image/png' href='/icon.57.png'> <!-- iPhone -->
<link rel='apple-touch-icon' type='image/png' sizes='72x72' href='/icon.72.png'> <!-- iPad -->
<link rel='apple-touch-icon' type='image/png' sizes='114x114' href='/icon.114.png'> <!-- iPhone4 -->
<link rel='icon' type='image/png' href='/icon.114.png'> <!-- Opera Speed Dial, at least 144×114 px -->

到目前为止，这是我发现的最广泛的方法。

最终决定取决于您自己的需求。问问自己，你的目标受众是谁？

更新于2018年5月27日：如预期所述，时间在流逝，事情也在变化。但是也有好消息。我找到了一个名为Real Favicon Generator的工具，它可以生成所有现代浏览器和平台上必要的图标行。不过它不能处理向后兼容性问题。

- 537mfb

---

我希望我们能够将它在某种程度上标准化。但是，如果愿望可以变成鱼，我们都能游进财富之中。我发现这是最好的方法。谢谢它。 - Kenton de Jong

这是一个很好的回答，但是创建每个文件都很困难，https://realfavicongenerator.net/可以为我们完成这项工作，我推荐使用它。 - Sr.PEDRO

@rocketsarefast - 找回一条四年前的评论的方法 - 537mfb