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 语法，例如：
<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语法的设备了。
这个解决方案非常有前途。不幸的是，它不起作用。
我刚刚尝试使用iPad Mini，运行iOS 7.0.4和Safari，使用以下代码：
<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 命名约定不匹配。例如，我可以在服务器的日志中看到 Safari 尝试访问
apple-touch-icon-76x76.png，无论 HTML 代码说什么。因此，有必要使用特殊名称以免被欺骗。
结果：
- 将链接添加到主屏幕时，Safari 无法找到合适的图片。它提供了该网站的缩影。
- 为页面添加书签时，Safari 会拍摄 57x57 的图片。这很奇怪，因为这个尺寸不是正确的（我的设备对 76x76 图标更感兴趣）并且专用于 iOS6 及更早版本。
太糟糕了，这个解决方案看起来不错。然而，即使这个测试成功了，也应该执行更多的测试，因为有几个平台使用 Apple 图标。特别是安卓。因此，即使iOS设备足够智能来处理这个技巧，其他一些现有或未来的设备也可能会失败。