当前位置：文江博客话题详情

网站图标：.ico 或 .png / 正确的标签？

发布于 2024-11-09 17:52:10 字数 115 浏览 6 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

空城旧梦 2024-11-16 17:52:10

~~为了与所有浏览器兼容，请坚持使用 .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" />

~~For compatibility with all browsers stick with .ico.~~

.png is getting more and more support though as it is easier to create using multiple programs.

for .ico

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

for .png, you need to specify the type

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

回复收藏 0 原文

无人问我粥可暖 2024-11-16 17:52:10

请参阅此处：跨浏览器 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-->

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

回复收藏 0 原文

心欲静而疯不止 2024-11-16 17:52:10

我知道这是一个老问题。

这是另一种选择 - 满足不同的平台要求 - 来源

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

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 Generator that generates all the required lines for the icon to work on all modern browsers and platforms. It doesn't handle backwards compatibility though.

回复收藏 0 原文

~没有更多了~