logo标签列表

目前，在所有支持Favicon的浏览器中显示Favicon的最佳方式是什么？

htmlstandardsfavicon
83

目前在所有支持favicon的浏览器中，最佳的获取方式是什么？

请包括以下内容：

  1. 各种浏览器支持哪些图像格式。

  2. 各种浏览器需要在哪些位置上添加哪些行。

1
如果用户选择将您的网站添加到主屏幕上，也值得在此处包括iPhone的“收藏夹图标”。 在这种情况下使用的代码如下：<link rel="apple-touch-icon" href="touch.png" /> 尺寸应为57x57像素。 或者，您可以省略链接标记，只需在您网站的根目录中放置一个名为“apple-touch-icon.png”的文件即可。 - different
顺便提一下，阅读一下这个：http://mathiasbynens.be/notes/touch-icons - Zach Lysobey
请注意，您需要为iPad和Retina iPhone显示器使用更大的图标。请参阅苹果的指南：http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html - Mike Ottum
9个回答
110

我在这里采用保险措施。

我创建了一个32x32的图标，并以.ico和.png格式命名为favicon.ico和favicon.png，图标名称并不重要，除非您正在处理旧版浏览器。

  1. 将favicon.ico放置在您的站点根目录中以支持旧版浏览器（可选且仅适用于旧版浏览器）。
  2. 将favicon.png放在我的图像子目录中（只是为了保持整洁）。
  3. 在<head>元素内添加以下HTML代码。
<link rel="icon" href="/images/favicon.png" type="image/png" />
<link rel="shortcut icon" href="/favicon.ico" />

请注意：

  • IANA将.ico文件的MIME类型注册为image/vnd.microsoft.icon。
  • Internet Explorer将忽略快捷图标关系的type属性，这是唯一支持此关系的浏览器，因此无需提供该属性。

参考资料

2
好的，我今天有一天“微软让我心烦意乱”。尽管它显示了stackoverflow网站的favicon，但我无法在Internet Explorer中使其工作。是否还有其他影响此问题的设置，例如doctype？ - belugabob
1
FYI - 我找到了答案。 如果你通过 http://localhost:8080/index.html 访问该网站，它不起作用 - 如果你使用机器的实际名称 (http://machineName:8080/index.html)，一切都像你期望的那样运行。 我甚至无法理解这种行为 - 有人愿意尝试吗？ - belugabob
2
更新 - 此行为是由浏览器缓存图标所导致的。如果您希望清空缓存，清除临时互联网文件将有助于解决此问题。 - belugabob
2
把IE版本的链接放在IE条件注释中会更整洁吗？ - EoghanM
9
32x32？不是16x16是标准吗？ - Eduardo Molteni
显示剩余2条评论
10

我使用.ico格式，并将以下两行代码放置于<head>元素内：

<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
6
为了支持平板电脑和智能手机的触摸图标，我更喜欢 HTML5Boilerplate 的方法。
有关触摸图标的更多信息可以在 this article 中找到。
由于当前浏览器的支持状态，您甚至不需要在文档中添加用于网站图标的 HTML 标签。浏览器会自动搜索一系列文件，例如对于 iOS，请参见以下示例：
如果 HTML 中没有指定图标，则 iOS Safari 将搜索带有 apple-touch-icon 或 apple-touch-icon-precomposed 前缀的图标在网站根目录下。例如，如果设备的适当图标大小为 57 x 57 像素，则 iOS 按以下顺序搜索文件名：
- apple-touch-icon-57x57-precomposed.png - apple-touch-icon-57x57.png - apple-touch-icon-precomposed.png - apple-touch-icon.png
我的建议是不要在文档中包含网站图标，而是在网站根目录中准备好文件列表：
  • apple-touch-icon-114x114-precomposed.png
  • apple-touch-icon-144x144-precomposed.png
  • apple-touch-icon-57x57-precomposed.png
  • apple-touch-icon-72x72-precomposed.png
  • apple-touch-icon-precomposed.png
  • apple-touch-icon.png (57px*57px)
  • favicon.ico HiDPI (32x32px)
当您从 html5boilerplate.com 下载模板时，这些都已经包含在内，您只需要用自己的图标替换它们即可。
第一个链接已经过时，需要更新到 https://github.com/h5bp/html5-boilerplate/blob/master/src/doc/html.md#favicons-and-touch-icon。我想自己编辑，但是字符数不够 :/ 感谢您的回答！ - Brendan
5
4

警告：IE6无法正确处理PNG格式的图片。

3

还有一个网站可以检查任何页面的favicon是如何制作的

getfavicon.org

在那里，您可以看到有关制作favicon、图像类型和分辨率的教程，非常好！

不再运作。 - Roman Starkov
3

为了在所有浏览器上正常工作，Favicon必须是一个.ico文件。

现代浏览器也支持PNG和GIF图像。

我发现通常最简单的方法是使用免费的网络服务创建Favicon，例如favicon.cc。

2

在您的根目录中有一个favicon.*文件会被大多数浏览器自动检测到。您可以使用以下方式确保其被检测到：

 <link rel="icon" type="image/png" href="/path/image.png" />

个人喜欢使用.png图像，但大多数格式都可以使用。

不，它不是“favicon.*”，只有很少的格式可以使用：ico、png、gif、jpeg和SVG。请参见https://en.wikipedia.org/wiki/Favicon#File_format_support。 - WhyNotHugo
1
这个问题的答案已经变得足够复杂，最好的方法是使用像RealFaviconGenerator这样的工具，它允许您上传png/jpg文件，然后为您生成所有平台所需的favicon和代码：https://realfavicongenerator.net/。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接