让网站图标跨浏览器/平台工作的最佳方法

Posted 2023-03-06

【中文标题】让网站图标跨浏览器/平台工作的最佳方法

【英文标题】：Best way to get favicon working cross browser/platform

【发布时间】：2013-12-01 00:08:30

【问题描述】：

阅读完这两篇文章 (OneTwo) 后，我对如何涵盖所有平台和浏览器以获得最佳网站图标供其使用感到困惑。

现在，我有了这个，但我不确定这是否是最优的。

<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/apple-touch-icon-152x152-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/apple-touch-icon-120x120-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/apple-touch-icon-76x76-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png">

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48 64x64" type="image/vnd.microsoft.icon">

我也不确定apple-touch-icon-precomposed.png 的大小。

但切入正题（tl;dr）：覆盖尽可能多的平台和浏览器的最佳方式是什么？推荐的图标尺寸是多少？

赏金将提供给能够回答以下两个问题的人：1. 覆盖尽可能多的平台和浏览器的最佳方式是什么？ 2. 每次出现都需要哪些尺寸。

【参考方案1】：

好的，您查看了http://mathiasbynens.be/notes/touch-icons，因为他是建议更改 html5 样板中有关 apple-touch-icons 的人之一

从他的网站有一个总结如下：

那么，使用哪种技术？这一切都取决于，真的。

如果必须支持 android，则必须使用 HTML， 我建议使用“不同图标大小”下的最后一个代码 sn-p 部分。 如果您只关心 ios，我强烈建议您使用非 HTML 方法。 如果你很懒，并不真正关心 Android、旧版 iOS 版本或性能，我想你可以只使用一个 152×152 图标，将其命名为 apple-touch-icon-precomposed.png 并将其放入 您网站的根目录。

这里是他与脚本和所有尺寸一起使用的测试用例：

http://mathiasbynens.be/demo/touch-icon

这应该回答 1. 和 2. 加上你可以睡得很好，因为他实际上做了人群测试并且涵盖了所有测试用例。

【讨论】：

您可能还想添加他的链接。这是一个很棒的备忘单：github.com/audreyr/favicon-cheat-sheet

【参考方案2】：

问题 1 很简单。在您的站点根目录中放置favicon.ico，所有浏览器都会读取它，即使是像 IE4 这样的旧版浏览器。 favicon 可以包含多个尺寸，浏览器会选择最佳尺寸，但推荐尺寸为 128x128（高分辨率桌面）、64x64（桌面）、16x16（浏览器选项卡）。该解决方案依赖于 Microsoft 的事实标准，这些标准本身并不是最佳的，但浏览器支持非常出色。这涵盖了我所知道的所有情况，除了愚蠢的特定于 iDevice 的“apple-touch-icon-precomposed”废话，而且您似乎已经掌握了这一点。

如果您使用此方法，您甚至不需要元标记，但元标记有一个优点，即它允许您强制刷新网站图标：

<link rel="shortcut icon" href="/favicon.ico?ver=2" />

问题 2 很难回答，因为总是有新设备问世。我个人并不认为涵盖“所有可能性”甚至是必要的，因为大多数情况下，设备会根据需要缩放最佳拟合。至少有一个高分辨率版本就足够了。

不要想太多。我使用单个 64x64 图标文件启动大多数网站，并且没有客户抱怨过质量或兼容性问题。我只在高分辨率版本在 16x16 上看起来不太好的情况下添加其他尺寸。