ios – 梳理“icon”和“apple-touch-icon”链接类型

Mobile Safari要求使用以下咒语,以获得比传统16×16更高分辨率的昵称：

<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语法的其他设备.

解决方法

这个解决方案很有前景.不幸的是,它不起作用.

我刚刚尝试使用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(例如60×60)和之前(例如57×57)
>有意将文件名更改为不匹配Apple naming conventions.例如,我可以在服务器的日志中看到Safari尝试访问apple-touch-icon-76×76.png,无论HTML代码如何.因此有必要使用不被欺骗的特殊名称.

结果：

>在主屏幕上添加链接时,Safari无法找到合适的图片.它提供了该网站的缩影.
>为页面添加书签时,Safari会拍摄57×57图片.这很奇怪,因为这个尺寸不是正确的(我的设备对76×76图标更感兴趣)并且专用于iOS6和之前版本.

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