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的工具,它可以生成图标在所有现代浏览器和平台上运行所需的所有行。虽然它不处理向后兼容性。