操作系统如何选择正确的 ico/favicon 大小？

Posted 2023-02-18

【中文标题】操作系统如何选择正确的 ico/favicon 大小？

【英文标题】：How does an OS pick up the correct ico/favicon size?

【发布时间】：2014-09-17 19:23:12

【问题描述】：

Based on this *** discussion，可以在一个文件中提供各种大小，“操作系统会选择最好的一个来显示。”

这是如何工作的？我们是否将其中的几个分配给一个声明回退到另一个声明？

【参考方案1】：

对于桌面浏览器，您应该有一个 favicon.ico 文件和几个 PNG 图标。

favicon.ico should contain three pictures: 16x16, 32x32 and 48x48. 可以有多个 PNG 图标，具体取决于要支持的平台：桌面浏览器为 16x16 和 32x32，android Chrome 为 196x196，等等。每张图片都用<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> 之类的东西声明。

浏览器对选择正确的图标有不同的态度：

在 Windows 7 之前，Internet Explorer 使用 favicon.ico、as described by Microsoft。 Windows 8 上的 Internet Explorer 11 选择它可以找到的最大的 PNG 图标。 Chrome 使用 16x16 (Windows) 或 32x32 (Mac) PNG 图标。 Firefox 使用最新声明的 PNG 图标（请参阅 bug 751712），尽管 it apparently doesn't always behave that way。 Safari 使用它可以找到的最大的 PNG 图标。

这些结果来自compatibility page of RealFaviconGenerator。完全披露：我是这个网站的作者。

【讨论】：

@ayjay 是的！如果您正在寻找一些即用型材料，请查看realfavicongenerator.net，它会为您生成一切。

@philippe_b 无论如何，我们可以诱导一个特定的行为？比如，我们能否以某种方式指定浏览器使用 48*48 图像？

另外，Edge 浏览器如何工作？我有一组网站图标，但它们都不能与 Edge 一起使用

@MV23 Edge 通常选择 32x32 PNG 图标。但是，众所周知，Edge 在本地站点（通常是您正在开发的站点）方面很麻烦。因此，如果您的网站图标适用于除 Edge 之外的所有浏览器，我建议您暂时忽略该问题，并在您的网站部署后再次检查。

【参考方案2】：

根据http://www.jonathantneal.com/blog/understand-the-favicon/ Jonathan T. Neal 的精彩文章，这取决于您使用的浏览器：

Firefox 和 Safari 将使用最后出现的图标。镀铬 Mac 将使用任何 ICO 格式的图标，否则 32×32 图标。 Windows 版 Chrome 将使用首先出现的网站图标，如果 它是 16×16，否则是 ICO。如果没有上述选项 可用，两种 Chrome 都将使用先出现的图标， 与 Firefox 和 Safari 完全相反。确实，Mac 版 Chrome 将忽略 16×16 图标并使用 32×32 版本 在非视网膜设备上将其缩小到 16×16。歌剧，不想 采取立场，将在完成时从任何可用图标中进行选择 随机的。我喜欢 Opera 这样做。