ios - 组合 "icon"和 "apple-touch-icon"链接类型

Question

Mobile Safari对于比传统 16x16 分辨率更高的图标，需要使用以下咒语:

<link rel="shortcut icon" href="old-16x16-favicon.ico" />
<link rel="apple-touch-icon" sizes="158x158" href="my-new-158x158-icon.png" />

但是，Firefox 需要使用 HTML5 syntax ，例如:

<link rel="shortcut icon" href="old-16x16-favicon.ico" />
<link rel="icon" type="image/png" sizes="158x158" href="my-new-158x158-icon.png" />

现在，我的期望是可以将它们组合成一行，如下所示。

<link rel="shortcut icon" href="old-16x16-favicon.ico" />
<link rel="icon apple-touch-icon" type="image/png" sizes="158x158" href="my-new-158x158-icon.png" />

有人知道这有什么问题吗？我们都知道事情很少这么简单，而且我没有 iOS 设备可以测试，更不用说所有其他毫无疑问复制了 Apple 语法的设备了。

Answer 1

这个解决方案非常有前途。不幸的是，它不起作用。

我刚刚尝试使用运行 iOS 7.0.4 和 Safari 的 iPad Mini，代码如下:

<link rel="icon apple-touch-icon" type="image/png" sizes="57x57" href="/apple-touch-icon-57.png">
<link rel="icon apple-touch-icon" type="image/png" sizes="114x114" href="/apple-touch-icon-114.png">
<link rel="icon apple-touch-icon" type="image/png" sizes="72x72" href="/apple-touch-icon-72.png">
<link rel="icon apple-touch-icon" type="image/png" sizes="144x144" href="/apple-touch-icon-144.png">
<link rel="icon apple-touch-icon" type="image/png" sizes="60x60" href="/apple-touch-icon-60.png">
<link rel="icon apple-touch-icon" type="image/png" sizes="120x120" href="/apple-touch-icon-120.png">
<link rel="icon apple-touch-icon" type="image/png" sizes="76x76" href="/apple-touch-icon-76.png">
<link rel="icon apple-touch-icon" type="image/png" sizes="152x152" href="/apple-touch-icon-152.png">

关于这段代码的两个注意事项:

• 尺寸适用于 iOS7(例如 60x60)和之前的版本(例如 57x57)
• 文件名被故意更改为不匹配 Apple naming conventions .例如，我可以在服务器的日志中看到 Safari 尝试访问 apple-touch-icon-76x76.png，无论 HTML 代码是什么。所以有必要使用特殊的名称，以免被欺骗。

结果:

• 向主屏幕添加链接时，Safari 无法找到合适的图片。它提供了网站的缩影。
• 为页面添加书签时，Safari 会拍摄 57x57 的图片。这很奇怪，因为这个尺寸不合适(我的设备对 76x76 图标更感兴趣)并且专用于 iOS6 和更早版本。

太糟糕了，这个解决方案看起来不错。然而，即使这个测试成功了，也应该进行更多的测试，因为有几个平台使用 Apple 图标。尤其是安卓。因此，即使 iOS 设备足够智能来处理这个技巧，其他一些现有或 future 的设备也可能会失败。