多个favicon大小，如何，在哪里和何时使用它们？

Question

我在读一篇文章：

根据他们的说法，如果您需要将favicon用于不同的目的，您需要为每个目的创建不同的功能（用于WIN8中的瓷砖，Opera和Chrome中的快速拨号）。

好的，我仍然使用一个16x16.ico文件，我认为它适合用于优化目的。

但是现在看完这些文章后，我有各种各样的问题，比如（假设我使用photoshop为不同的目的创建了不同的图标）：

-为了指定的目的，在html(file)中的哪个位置应该添加哪些行(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页上加载所有图标，浏览器是否可以为所有子页缓存所有图标？（通过将所有图标放在站点的根目录中？）

-但这同样会增加索引页本身的加载时间，从而影响站点的性能。

那么，是否有必要检测出favicon需要用于何种目的，然后动态地为其提供服务（例如使用JavaScript)，而不损失页面加载的速度？另外，如何为Chrome的Webstore创建favicon？（即(HTML)代码行）。

希望这里的专家能帮助我。提前谢了。

>

如何拥有多个favicon大小，但默认情况下只提供16x16？,

站点URL旁边的图像图标，

目前，在所有支持偏爱的浏览器中显示偏爱图标的最佳方式是什么？,

Answer 1

我问了一个关于偏爱的类似问题，在提供了几个链接后，我想出了一个多尺寸的解决方案，等等。

我在网站的中使用以下代码：

<!-- 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">

为了更好地理解，我对每一行代码都进行了注释。现在回答你们的问题：

-为了指定的目的，应该在html（文件）中添加哪些（html）代码行？

参见上面的代码。

-通过将所有图标加载到index.html页面，浏览器是否可以将它们缓存到所有子页中？（通过将所有图标放置在站点的根目录中？）

如上所述，我不认为真的需要JS解决方案。我在这里看到了这个问题，所以问关于JS和Favicons的问题。就我个人而言，我可以看到JS会增加比文件大小本身更多的开销。我不能用实际测试来支持这种说法，只是一个想法。（考虑的是，访问偏爱需要多少代码，您真的节省了任何开销吗？）

理论上，您应该能够使用以下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">

理论上，浏览器会选择最佳大小并加载它，然而，这并不是在所有浏览器中都能很好地工作。一些浏览器选择最佳大小，而其他浏览器加载所有大小，从而增加了开销。

根据我所读到的一切和我的经验，我强烈推荐在这个答案开始时使用的代码，大小在注释中指定。这覆盖了大多数浏览器，没有大量开销，并为最终用户提供了良好的体验。

Chrome Webstore的大小是128x128px，但如果它与标准的favicon代码不同，我不确定您应该使用的确切代码。