最近在尝试使用Node时，我从Safari迁移到Chrome（似乎想要在阳光下下载所有内容）来比较加载速度，看看它在其他浏览器上的表现如何。
Chrome会逐字地要求我在HTML中为Chrome，Android，和 Favicon文件表示的每个文件。桌面浏览器显然只使用一个或最多三个文件。它没有任何Android图标的功能用途（据我所知），但它还是要求它们。
基本上，它要求所有这些（有趣的是它不会请求清单文件）：
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="144x144" href="/android-icon-144x144.png">
<link rel="icon" type="image/png" sizes="96x96" href="/android-icon-96x96.png">
<link rel="icon" type="image/png" sizes="72x72" href="/android-icon-72x72.png">
<link rel="icon" type="image/png" sizes="48x48" href="/android-icon-48x48.png">
<link rel="icon" type="image/png" sizes="36x36" href="/android-icon-36x36.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
发现这一点，我比较了速度：一个只请求它需要的浏览器，而不是想要请求所有东西的浏览器。完成时间导致大约5-10倍的差异（512x512可以杀死你 - 即使它已预先加载到服务器上）。
为了比较，我还使用以下内容：
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="192x192" href="/apple-touch-icon-precomposed.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#FFF">
Safari似乎根据它将使用的内容来挑选和收听。
为了完成：
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-config" content="/browserconfig.xml">
<meta name="msapplication-TileColor" content="#FFF">
<meta name="theme-color" content="#FFF">
<meta name="apple-mobile-web-app-title" content="App">
<meta name="application-name" content="App">
问题：
是否可以将JSON请求中的所有文件数据发送到客户端JS脚本，并向浏览器提供所需的favicon文件，而不是<link>个标识符？
或者，是否可以加载所有这些文件并将它们嵌入到HTML中，而不是等待请求并将文件作为响应发送？
我意识到还有其他事情可以花时间尝试优化。
我也意识到设置缓存规则会大大简化这个场景......以后。我想知道是否有可能提供快速的第一反应。
基本上，有没有办法减少过度热心的图标请求所导致的完成时间？
答案 0 :(得分：1)
您的Android图标应在manifest.json文件中定义。 Apple图标的处理方式不同，因为它们使用rel="apple-touch-icon"，但所有其他图标都使用通用rel="icon"，您应该只使用一次。
请参阅Google的instructions如何正确设置Android快速图标。