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

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

我刚刚尝试使用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 naming conventions。例如，我可以在服务器的日志中看到Safari尝试访问apple-touch-icon-76x76.png，无论HTML代码是什么。所以有必要使用特殊的名字，不要被欺骗。

结果：

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

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

结合“icon”和“apple-touch-icon”链接类型

1 个答案: