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

目前在所有支持它的浏览器中显示收藏夹图标的最佳方法是什么？

请包括:

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

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

41918 次浏览
小开

大多数浏览器都会自动检测到根目录中的 favicon.*:

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

个人而言，我使用。 png 图像，但大多数格式应该工作。

小开

维基百科来救场了

小开

我使用. ico 格式，在 <head>元素中放入以下两行:

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

收藏夹必须是 . ico 文件才能在所有浏览器上正常工作。

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

我发现一般来说，创建一个网站最简单的方法就是使用免费的 Web 服务，比如 Vificon.cc。

小开

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

小开
最佳答案

我去拿腰带和牙套。

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

  1. 在站点根目录中放置 favicon.ico以支持较老的浏览器(可选且仅与较老的浏览器相关)。
  2. 在我的 images 子目录中放置 Favicon.png (只是为了保持整洁)。
  3. 在 <head>元素中添加以下 HTML。
<link rel="icon" href="/images/favicon.png" type="image/png" />
<link rel="shortcut icon" href="/favicon.ico" />

请注意:

  • .ico文件的 MIME 类型被 < strong > IANA 注册为 image/vnd.microsoft.icon。
  • Internet Explorer 会忽略快捷图标关系的 type属性，这是唯一支持这种关系的浏览器，不需要提供。

参考文献

小开

还有一个网站，在那里你可以检查任何网页的图标是如何制作的

GetFavicon.org

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

小开

为了支持平板电脑和智能手机的触摸图标，我更喜欢 HTML5Boilerplate的方式

更多关于触摸图标的信息可以在 这篇文章中找到。

在浏览器支持的当前状态下，你甚至不需要为文档中的图标添加 HTML 标记。浏览器会自动搜索一系列的文件，看看这个 iOS 的例子:

如果 HTML 中没有指定图标，iOSSafari 将搜索 网站的根目录的图标与苹果触摸图标或 苹果-触摸-图标-预组合前缀。例如，如果适当的 设备的图标大小为57 × 57像素，iOS 搜索文件名 按以下顺序:

  1. Apple-touch-icon-57x57-预组合. png
  2. Apple-touch-icon-57x57. png
  3. Apple-touch-icon-预组合
  4. 苹果触摸图标

我的建议是不要在你的文档中包含一个图标，而是在根网站中准备一个文件列表:

  • Apple-touch-icon-114x114-预组合
  • Apple-touch-icon-144x144-预组合
  • Apple-touch-icon-57x57-预组合. png
  • Apple-touch-icon-72x72-预组合. png
  • Apple-touch-icon-预组合
  • Apple-touch-icon.png (57px*57px)
  • Vificon.ico HiDPI (32x32px)

当你从 Html5boilerplate.com下载一个模板时，这些都包括在内，你只需要用你自己的图标来替换它们。

小开

这个问题的答案已经变成了 已经够复杂了，最好的方法就是使用像 RealFaviconGenerator 这样的工具，它可以让你上传一个 png/jpg，然后生成图标和代码来覆盖所有的平台: https://realfavicongenerator.net/


提交答案