16

去年，Favicon 业务变得复杂起来。（重新）发明了新型设备，例如平板电脑和智能手机。他们以新的方式使用网站图标（例如，作为主屏幕上的应用程序图标），并且需要特定于供应商的方式来链接它们。以类似的方式，浏览器现在允许为网络应用程序创建桌面快捷方式（它们也使用图标作为图标）。更糟糕的是，我们现在在便携式设备和笔记本电脑中都有高分辨率（“视网膜”）显示器，这需要更高分辨率的图像来显示图标。更糟糕的是，不同的浏览器（和版本）支持不同的图标图像格式和不同的大小。从 16x16-only .ico-only IE6 开始，到现在支持 .svg 图标的 Opera 结束。

为了在当今大多数设备和浏览器上支持清晰的图标，我应该怎么做？

到目前为止，我能找到的最好的资源是html5boilerplate，它建议使用以下文件：

apple-touch-icon-114x114-precomposed.png
apple-touch-icon-144x144-precomposed.png
apple-touch-icon-57x57-precomposed.png
apple-touch-icon-72x72-precomposed.png
apple-touch-icon-precomposed.png
apple-touch-icon.png
favicon.ico  # 32x32

<head>而没有在标签中放置任何指向它们的链接。

编辑：另一个考虑是 .ico 文件可以在其中存储多个分辨率不同的图像。这有用还是受支持？

4

1 回答 1

13

在http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html有一些官方建议似乎可以确认您的列表。

理想情况下，favicon.ico 文件应该在一个文件中包含多个分辨率，因为最新的浏览器现在可以利用这一点，并且 16 x 16 图标在视网膜屏幕上看起来永远不会很好。

微软现在显然建议 favicon.ico 文件至少包含 16×16、24×24、32×32 和 64×64。

我刚刚推出了一个免费的在线工具，可以在以下位置创建这样的网站图标：http: //iconifier.net

有关最新 favicon 信息的更多链接，请参阅网站上的自述文件页面。

于 2013-01-16T11:58:28.177 回答