Html 网站图标：.ico 或 .png / 正确的标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6121725/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Favicon: .ico or .png / correct tags?
提问by Richard
In a HTML5 document, which favicon format do you recommend and why? I want it to be supported by IE7 and all the modern browsers.
在 HTML5 文档中，您推荐哪种网站图标格式，为什么？我希望 IE7 和所有现代浏览器都支持它。
Also, when using .png, do I need to specify the type (type="image/png")?
另外，使用 .png 时，是否需要指定类型（type="image/png"）？
回答by Ibu
For compatibility with all browsers stick with .ico.
为了与所有浏览器兼容，请坚持使用.ico.
.png is getting more and more support though as it is easier to create using multiple programs.
.png 得到越来越多的支持，因为它更容易使用多个程序创建。
for .ico
对于.ico
<link rel="shortcut icon" href="http://example.com/myicon.ico" />
for .png, you need to specify the type
对于 .png，您需要指定类型
<link rel="icon" type="image/png" href="http://example.com/image.png" />
回答by rudimenter
See here: Cross Browser favicon
请参阅此处：跨浏览器图标
Thats the way to go:
这就是要走的路：
<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-->
回答by 537mfb
I know this is an old question.
我知道这是一个老问题。
Here's another option - attending to different platform requirements - 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 -->
This is the broadest approach I have found so far.
这是迄今为止我发现的最广泛的方法。
Ultimately the decision depends on your own needs. Ask yourself, who is your target audience?
最终决定取决于您自己的需求。问问自己，你的目标受众是谁？
UPDATE May 27, 2018:As expected, time goes by and things change. But there's good news too. I found a tool called Real Favicon Generatorthat generates all the required lines for the icon to work on all modern browsers and platforms. It doesn't handle backwards compatibility though.
2018 年 5 月 27 日更新：正如预期的那样，时间会流逝，事情会发生变化。但也有好消息。我找到了一个名为Real Favicon Generator的工具，它可以生成图标在所有现代浏览器和平台上运行所需的所有行。虽然它不处理向后兼容性。
