在 HTML5 文档中，您推荐哪种 favicon 格式，为什么？我希望 IE7 和所有现代浏览器都支持它。
另外，使用 .png 时，是否需要指定类型（type="image/png"）？
问问题
371590 次
3 回答
478
为了与所有浏览器兼容，请坚持使用.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" />
于 2011-05-27T18:19:07.380 回答
39
请参见此处：跨浏览器图标
这就是要走的路：
<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-->
于 2012-06-08T15:44:46.047 回答
32
我知道这是一个老问题。
这是另一种选择 - 满足不同的平台要求 -来源
<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的工具，它可以生成图标在所有现代浏览器和平台上工作所需的所有行。但它不处理向后兼容性。
于 2014-07-05T15:45:11.197 回答