4

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 语法的设备了。

4

1 回答 1

2

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

我刚刚尝试使用 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 设备已经足够聪明地处理这个技巧，其他一些现有或未来的设备也可能会失败。

于 2014-01-16T07:29:12.507 回答