去年,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 文件可以在其中存储多个分辨率不同的图像。这有用还是受支持?