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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:45:56  来源:igfitidea点击:

Favicon: .ico or .png / correct tags?

htmlpngfaviconico

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