Question

我正在阅读一篇文章：

Create a favicon for your site和Why so many files?。

根据他们的说法，如果你需要使用favicon用于各种目的，你需要为每个目的创建不同的（对于WIN8中的图块，对于Opera和Chrome中的快速拨号）。

好的，没问题，我仍然使用16X16 .ico文件，我认为该文件适用于优化目的。

但是现在阅读完这些文章后，我会遇到各种各样的问题（假设我已经使用photoshop为各种目的制作了各种图标）：

- 如何检测应该向浏览器提供哪个图标（如何检测该浏览器是要求favicon在地址栏中显示它？还是要保存为磁贴？或用于快速拨号？）< / p>

- 如何将该特定图标提供给浏览器，而不会因为图标大小而失去连接速度？

- 为了指定的目的，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），而不会降低页面加载的速度？另外，如何为favicon的网店提供chrome？（即（html）代码的哪一行。

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

PS：

我已经读过：

How to have multiple favicon sizes, yet serve only a 16x16 by default?，
Image icon beside the site URL，
What is currently the best way to get a favicon to display in all browsers that support Favicons?，
Preferred way to use favicons?和
How can I add a picture in address bar of the browser when my page is browsed?。

但它们很少或没有用。

Answer 1

我asked a similar question关于favicons，在提供了一些链接后，我想出了一个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">

我已经对每行代码进行了评论，以便更好地理解。现在回答你的问题：

- 如何检测应该向浏览器提供哪个图标（如何检测该浏览器是否要求favicon在地址栏中显示它？还是要保存为磁贴？或用于快速拨号？）

您可以创建一个可行的JS解决方案，但是，我认为不需要。如上所示，我为IE创建了一些不同的大小和条件注释。每个图标都以特定浏览器为目标，其余图标未加载，从而减少了开销。

- 如何将该特定图标提供给浏览器，而不会因为图标大小而失去连接速度？

对我来说，我尽可能地压缩图像。我正在使用PNG文件（除了IE 9及以下是ICO文件），我使用TinyPNG来压缩这些文件并且它运行良好。我的图标大小平均为3-6千字节（根据图标而有所不同）。虽然这比16x16 ICO文件大，但我相信它可以提供所有设备的最佳体验。

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

见上面的代码。

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

网站的根目录适用于名为favicon.ico的ICO文件，但不适用于PNG或其他文件类型。如果代码仅在index.html页面上，我不确定它是否会缓存网站上所有页面的文件。我通常在我的模板中有上面的代码，它将它应用于我网站上的所有页面。

- 但这又会通过增加索引页面本身的加载时间来影响网站的性能。

那么，无论如何都要检测需要favicon的目的，然后动态地使用它（例如使用JavaScript），而不会降低页面加载的速度？另外如何为chromes webstore提供一个favicon？（即（html）代码的行）。

我发现上面的代码对网站性能的影响可以忽略不计。我再次压缩所有PNG文件。

如上所述，我不相信真正需要JS解决方案。我看到这个question here on SO询问JS和favicons。就个人而言，我可以看到JS会增加比文件大小本身更多的开销。我无法通过实际测试备份该声明，只是一个想法。（想法是，访问favicon需要多少代码，你真的节省了开销吗？）

理论上，您应该能够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但我不确定如果它与标准的favicon代码不同，您应该使用的确切代码。

多个图标大小，如何，何时何地使用它们？

1 个答案: