[英]Combinging “icon” and “apple-touch-icon” link types
Mobile Safari requires the use of the following incantation for favicons of a higher resolution than the traditional 16x16: 移动Safari需要使用以下咒语来获得比传统16x16更高分辨率的昵称:
<link rel="shortcut icon" href="old-16x16-favicon.ico" />
<link rel="apple-touch-icon" sizes="158x158" href="my-new-158x158-icon.png" />
However, Firefox requires the use of the HTML5 syntax , eg: 但是,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" />
Now, my expectation is that it should be possible to combine these into a single line, as follows. 现在,我的期望是应该可以将这些组合成一行,如下所示。
<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" />
Does anyone know of any problems with this? 有谁知道这有什么问题吗? We all know things are rarely this simple, and I don't have an iOS device to test against, let alone all the other devices out there that have no-doubt copied the Apple syntax.
我们都知道事情很少这么简单,我没有iOS设备可以测试,更不用说那些毫无疑问复制了Apple语法的其他设备。
This solution is very promising. 这个解决方案很有前景。 Unfortunately, it does not work .
不幸的是, 它不起作用 。
I have just tried with an iPad Mini, running iOS 7.0.4 and Safari with the following code: 我刚刚尝试使用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">
Two notes about this code: 关于此代码的两个注释:
apple-touch-icon-76x76.png
, whatever the HTML code says. apple-touch-icon-76x76.png
,无论HTML代码是什么。 So it was necessary to use special names not to be tricked. The results: 结果:
Too bad, this solution looks good. 太糟糕了,这个解决方案看起来不错。 Yet, even if this test was successful, a lot more tests should have been performed, since several platforms use the Apple icons.
然而,即使这个测试成功,也应该进行更多测试,因为有几个平台使用Apple图标。 In particular, Android.
特别是Android。 So even if iOS devices would have been smart enough to handle this trick, some other existing or future devices might fail.
因此,即使iOS设备足够智能来处理这一技巧,其他一些现有或未来的设备也可能会失败。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.