如何找出浏览器实际使用的网站图标

Question

我有一个新网站，其中包含使用Real Favicon Generator从源文件自动生成的一组图标图像，其中有：

• 9 个苹果图标
• 1 Android 图标
• 3 个命名图标
• 1 Safari 固定SVG
• 1 份json舱单
• 1 套 Microsoft 磁贴图像/颜色

显然，其中大部分都可以为其各自的供应商放置 - Apple、Microsoft 磁贴等。

我在 Firefox 上运行网站时遇到问题，我希望更改它使用的图标，但我不知道它实际使用哪一个？

我已阅读此问题，但此处所述的答案不正确并且

Firefox 和 Safari 将使用最后出现的图标。

不再是真的。

显然，在一个浏览器上浏览约 15 个图像来查找发生更改的图像是一项耗时的重复工作，而且我实际上发现 Firefox 42 选择 96x96 尺寸的图标，而不是最后一个呈现的图标。

问题：

有没有一种方法[除了反复试验之外]加载页面，然后在浏览器中找到一个声明，定义将 HTML 中的哪个图像head用作该浏览器中的页面图标？

附加信息：

这里有一个不完整的参考列表。然而，这遗漏了各种版本和各种操作系统，我只能假设这些细节是通过反复试验找到的。

虽然这很有用，但该问题的各种链接和解决方案为自动化流程提供了单个 URL 结果，例如

http://www.google.com/s2/favicons?domain=www.domain.com

它可以很好地返回有效的图标，但它不会返回我的浏览器在测试时使用的图标。

该问题的其他链接类似，大多数仅返回 16x16 的图标，许多显然没有返回所使用的图像。有些可能没有返回所使用的图像...有时很难区分 16x16px！

Answer 1

您可以使用RealFaviconGenerator 的兼容性测试。测试将询问您看到哪个图标。但有一个问题：该测试并不是真正针对最终用户的，因此您必须右键单击与您看到的图标相对应的图像，检查它，然后查看标签alt的属性img。但这会阻止您使用 20 多个图像来使它们变得不同。容易多了！

全面披露：我是 RealFaviconGenerator 的作者。

注意：我对您的调查感兴趣，以解决您提到的答案（我是他的作者）。

Answer 2

使用Firefox 和 Chromium 中提供的Inspect Element或仅Inspect工具。Network选项卡显示与重新加载相关的所有 http 操作。当页面重新加载时，按“favicon”过滤很可能会看到正确的操作。

浏览器下载图像这一事实强烈暗示了所显示的内容。然而，疑虑仍然存在，例如 .ICO 的哪一部分。不幸的是，该选项卡是一个计算元素，在（计算的）页面源中不可见。

在 Firefox 上，iconuri在导出书签的 json 代码中可见。