HTML标题链接 - 这些元素何时加载？

Question

我正在开发一个新的Web项目，目前我正在使用favicon文件。前段时间这是一项简单的任务，但现在几乎完整的HTML标题似乎被这个主题所占据了：

• 默认的favicon
• iOS图标
• Microsoft favicon和tiles
• Android favicon
• Safari标签图标
• Chrome图标
• ...

使用标准<link />标记引用所有这些元素。我现在想知道何时加载了这些元素：

默认情况下所有 <link />元素是否已加载，或者不同的浏览器是否足够智能，只能加载当前平台/系统上真正使用的元素？ iOS上也加载了Windows Tile Icon吗？

对于引用为<link />的其他元素也是如此？假设标题中链接了100个不同的样式表。从理论上讲，浏览器可以以相反的顺序加载这些文件（之后的样式会先重写一次）。如果当前文件中使用的所有样式都已在最后一个样式表中定义，则不需要加载其他99个文件，是吗？

在现实生活中，很可能很难确定样式表是否处理所有可能的stlyes而不是下载和解析/组合所有100个文件。

然而问题是相同的：似乎有很多情况下没有必要下载所有<link />元素。浏览器是否足够智能以检测和使用这些案例？

Answer 1

假设响应来自：

How to prevent favicon.ico requests?

  

在Chrome和Android中，IFRAME会生成3个关于favicon的请求：

     

“GET /favicon.ico HTTP / 1.1”404 183“GET   /apple-touch-icon-precomposed.png HTTP / 1.1“404 197”GET   /apple-touch-icon.png HTTP / 1.1“404 189

来自：Will browsers request /favicon.ico or <link> first?

我猜浏览器首先请求<link>中的所有favicons，如果没有指定，则在文件夹的根目录中搜索“favicon”。

仅供参考：您可以查看：https://github.com/audreyr/favicon-cheat-sheet以获取更多信息！希望它有所帮助！

Answer 2

如今，您应该声明至少3或4个图标以支持所有浏览器，如果您想要实现所有可用图标，则最多可以声明20个图标。有关加载的已知问题：

• Firefox loads all PNG icons on the critical path（link rel="icon"图标; 不 Apple触摸图标）。根本原因是FF不支持sizes属性。如果您对此感到担心， please vote for this bug 。
• Chrome loads more than one PNG icon，这比以前更好，但仍然不完美。相同的根本原因：Chromes does not support the sizes attribute。但显然the Chromium team feels concerned about this。
• iOS Safari通常会加载两个不同的Touch图标。这是我在使用iPad测试图标时在服务器日志中多次观察到的，但我没有任何可靠的材料在这里提供。另请注意iOS Safari regularly loads Touch icons in the root path by convention（for example, /apple-touch-icon-120x120-precomposed.png）。因此，声明较少的触摸图标，甚至只有一个触摸图标，可能不是一个明确的解决方案：Safari可能会尝试加载一些图标并获得404.

我没有Android Chrome或IE的数据。