Javascript 多种favicon尺寸，如何、何时何地使用？

我在读一篇文章：

和

根据他们的说法，如果您需要为各种目的使用

favicon

，则需要为每种目的创建不同的应用程序（用于WIN8中的互动程序，用于Opera和Chrome中的快速拨号）

好的，那很好，我仍然使用一个16X16

.ico

文件，我认为它适合用于优化目的

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

-如何检测应向浏览器提供哪个图标（如何检测浏览器请求在地址栏中显示图标？或另存为平铺？或快速拨号？）

-如何在不因图标尺寸过大而失去连接速度的情况下为浏览器提供特定图标

-为了特定目的，应在

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

页面上的所有图标，浏览器是否可以缓存所有子页面的所有图标？（通过将所有图标放置在站点的根目录中？）

-但这同样会通过增加

索引

页面本身的加载时间来影响站点的性能

那么，是否有必要检测favicon的用途，然后动态地（例如使用

JavaScript

）为其提供服务，而不损失页面加载速度？另外，如何为

chrome

s网站存储设置

favicon

（即，哪几行（

html

）代码）

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

附言：

我已经读过：

,

,

,

及

但是它们没有什么用处。

我了解favicons，在提供了一些链接之后，我想出了一个适合多种尺寸的

我在网站的

中使用以下代码：

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

从理论上讲，浏览器会选择最佳大小并加载它，但是，这是错误的。一些浏览器选择最佳大小，而其他浏览器则加载所有大小，从而增加了开销

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

Chrome Webstore是一个很好的浏览器，但是如果它与标准的favicon代码不同，我不确定你应该使用什么代码

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