我正在阅读一篇文章:
Create a favicon for your site和 Why so many files? .
根据他们的说法，如果您需要将 favicon 用于各种目的，则需要为每个目的创建不同的图标(对于 WIN8 中的磁贴，对于 Opera 和 Chrome 中的快速拨号)。
好的，没关系，我仍然使用我认为适合优化目的的 16X16 .ico 文件。
但现在阅读这些文章后，我有各种各样的问题(假设我已经使用 photoshop 为各种目的创建了各种图标):
-如何检测应该为浏览器提供哪个图标(如何检测浏览器要求 favicon 在地址栏中显示它？或保存为磁贴？或快速拨号？)
-如何在不因图标过大而降低连接速度的情况下将特定图标提供给浏览器？
-为了指定的目的，应该在html(文件)的什么地方添加哪些(html)代码？
目前我使用的 16X16 图标:
<link rel="icon" type="image/x-icon" href="favicon.ico"/>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/><!-- IE8 -->
-通过加载index.html页面上的所有图标，浏览器可以为所有子页面缓存它们吗？(通过将所有图标放在站点的根目录中？)
-但这同样会通过增加 index 页面本身的加载时间来影响网站的性能。
那么，有没有办法检测需要 favicon 的目的，然后动态地提供它(例如使用 JavaScript)，而不损失页面加载速度？还有如何为 chrome 的网上商店设置一个 favicon？(即，哪几行 (html) 代码)。
希望这里的专家能帮助我。提前致谢。
附言:
我已经读过:
How to have multiple favicon sizes, yet serve only a 16x16 by default? ,
What is currently the best way to get a favicon to display in all browsers that support Favicons? ,
How can I add a picture in address bar of the browser when my page is browsed? .
但它们的用处很小或根本没有用。
最佳答案
我asked a similar question关于网站图标，在提供了一些链接后，我想出了一个 solution多种尺寸等
我在 <head> 中使用以下代码我的网站:
<!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<!-- IE 10+ "Metro" Tiles - 144x144 pixels in size icon should be transparent -->
<meta name="msapplication-TileColor" content="#D83434">
<meta name="msapplication-TileImage" content="path/to/tileicon.png">
<!-- Touch Icons - iOS and Android 2.1+ 152x152 pixels in size. -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 96x96 pixels in size. -->
<link rel="icon" href="path/to/favicon.png">
为了更好地理解，我对每一行代码都进行了注释。现在回答你的问题:
-How to detect that which icon should be served to browser (how to detect that browser is asking favicon for showing it in address bar? or for to save as tile? or for a speed dial?)
您也许能够创建一个可行的 JS 解决方案，但是，我认为这不是必需的。正如您在上面看到的，我为 IE 创建了一些不同的大小和条件注释。每个图标都针对特定的浏览器，其余图标不会加载，从而减少开销。
-How to serve that specific icon to browser without losing speed of connection because of large icon size?
对我来说，我会尽可能地压缩图像。我正在使用 PNG 文件(IE 9 及以下是 ICO 文件除外)并且我使用 TinyPNG压缩那些，效果很好。我的图标平均大小为 3 - 6 KB(因图标而异)。虽然它比 16x16 ICO 文件大，但我相信它可以在所有设备上提供最佳体验。
-what lines of (html)code should be added where in html(file) for the specified purpose?
见上面的代码。
-By Loading all the icons on index.html page, can a browser cache them all for all the subpages?(By placing all the icons in root directory of site?)
站点的根目录适用于名为 favicon.ico 的 ICO 文件但不适用于 PNG 或其他文件类型。如果代码仅在 index.html 上，我不确定它是否会缓存站点上所有页面的文件页。我通常在我的模板中包含上述代码，并将其应用于我网站上的所有页面。
-But again that will affect the performance of site by increasing the load time of index page itself.
so, Is there anyway to detect for which purpose the favicon is needed and then to serve it dynamically(using JavaScript for example), without losing speed of page load? Also how to have a favicon for chromes webstore?(ie, what lines of (html)code).
我发现上面的代码对网站性能的影响可以忽略不计。同样，我大量压缩了所有 PNG 文件。
如上所述，我不认为真的需要 JS 解决方案。我看到这个question here on SO询问 JS 和网站图标。就我个人而言，我可以看到 JS 在哪里会增加比文件大小本身更多的开销。我无法用实际测试来支持该声明，只是一个想法。 (想法是，访问网站图标需要多少代码，您真的节省了任何开销吗？)
理论上你应该能够specify the favicons sizes使用以下 HTML:
<link rel=icon href=favicon.png sizes="16x16" type="image/png">
<link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
<link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
<link rel=icon href=iphone.png sizes="57x57" type="image/png">
<link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">
理论上，浏览器会选择最佳尺寸并加载它，但是，这 doesn't work well across all browsers .一些浏览器会选择最佳尺寸，而另一些浏览器会加载所有尺寸，从而增加了开销。
根据我所阅读的所有内容和我的经验，我强烈推荐在评论中指定的大小下使用此答案开头的代码。这涵盖了大多数浏览器，没有大量开销，并为最终用户提供了良好的体验。
Chrome 网上应用店是 128x128px in size但我不确定您应该使用的确切代码，如果它与标准图标代码不同的话。
关于javascript - 多个图标大小，如何、何时何地使用它们？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24740611/