Question

在HTML5文档中，您推荐哪种favicon格式？为什么？我希望IE7和所有现代浏览器都支持它。

另外，使用.png时，是否需要指定类型（type =“image / png”）？

Answer 1

与所有支持.ico的浏览器兼容。

.png正在获得越来越多的支持，因为使用多个程序创建起来更容易。

for .ico

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

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

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

Answer 2

见这里：Cross Browser favicon

这就是要走的路：

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

Answer 3

我知道这是一个老问题。

以下是另一种选择 - 参与不同的平台要求 - Source

<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的工具，它可以为所有现代浏览器和平台生成图标所需的所有行。但它并没有处理向后兼容性。

Favicon：.ico或.png /正确的标签？

3 个答案: