当前让网站图标在所有支持网站图标的浏览器中显示的最佳方法是什么？

StackOverflow https://stackoverflow.com/questions/37073

  •  09-06-2019
  •  | 
  •  

题

目前让网站图标在当前支持它的所有浏览器中显示的最佳方法是什么？

请包括：

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

  2. 不同浏览器的哪些位置需要哪些行。

有帮助吗？

解决方案

我在这里采用腰带和背带方法。

我在两个中创建了一个 32x32 图标 .ico 和 .png 格式称为 favicon.ico 和 favicon.png. 。除非您使用的是较旧的浏览器，否则图标名称并不重要。

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

请注意：

  • MIME 类型为 .ico 文件被注册为 image/vnd.microsoft.icon 互联网号码分配机构.
  • Internet Explorer 将忽略 type 快捷方式图标关系的属性，并且这是唯一支持此关系的浏览器，因此不需要提供。

参考

其他提示

我使用 .ico 格式并将以下两行放在 <head> 元素：

<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

为了还支持平板电脑和智能手机的触摸图标，我更喜欢以下方法 HTML5样板

有关触摸图标的更多信息，请参见 本文.

根据浏览器支持的当前状态，您甚至不必在文档中添加 favicon 的 HTML 标记。浏览器将自动搜索文件列表，请参阅 iOS 的示例：

如果在HTML中未指定任何图标，iOS Safari将使用Apple-Touch-Icon或Apple-Touch-Icon-tercomped前缀搜索网站的根目录。例如，如果设备的适当图标大小为57×57像素，则iOS按以下顺序搜索文件名：

  1. apple-touch-icon-57x57-precomposed.png
  2. 苹果触摸图标-57x57.png
  3. 苹果触摸图标-precomposed.png
  4. 苹果触摸图标.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
  • 苹果触摸图标-precomposed.png
  • 苹果触摸图标.png (57px*57px)
  • 图标.ico HiDPI (32x32px)

当您从以下位置下载模板时 html5boilerplate.com 这些都包含在内，您只需将它们替换为您自己的图标即可。

请注意，IE6 无法正确处理 PNG。

网站图标必须是 .ico 文件 在所有浏览器上正常工作。

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

我发现一般来说，创建一个最简单的方法是使用免费提供的网络服务，例如 网站图标.cc.

还有一个网站，您可以在其中查看任何页面的图标是如何制作的

getfavicon.org

在那里你可以看到关于制作图标、图像类型和分辨率的教程，这很好！

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

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

我个人使用 .png 图像，但大多数格式都应该可以。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top