将Apple图标添加到网站
我已经用Woorank测试了我的网站,并显示有关缺少Apple图标的警告.
I have tested my site with Woorank and shows a warning about missing of the Apple Icon.
我已经搜索过,但不确定如何添加此图标,我已经找到了此代码
I have searched but I'm not sure how to include this icon, I have found this code
<link rel="apple-touch-icon-precomposed" href="apple-touch-iphone.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-ipad.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-iphone4.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-ipad-retina.png" />
我必须以与标准收藏夹相同的方式将这些行包括在头部吗? (我的网站使用HTML5)
Must I include these lines in the head in the same way of the standard favicon? (My website is in HTML5)
这些行中的第一张图像的分辨率是什么"apple-touch-iphone.png"
What is the resolution of the first images in these lines "apple-touch-iphone.png"
最小图标应为57×57像素.
The smallest icon should be 57×57 pixel.
请注意,-precomposed"状态表明,链接的图标文件已经是闪亮的3D格式.如果您忽略预合成",iOS将为图像添加3D光彩效果.
Be aware, that the "-precomposed" states, that the linked icon file is already shiny and in 3D. If you leave out "-precomposed", iOS will add a 3D brilliance effect to the image.
是的,您当然需要在head
中插入link
标签.
And yes, of course do you need to insert the link
-tags to the head
.
完整图标集的示例:
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="favicon.ico">
<link rel="apple-touch-icon" type="image/png" href="icon.57.png"><!-- iPhone -->
<link rel="apple-touch-icon" type="image/png" sizes="72x72" href="icon.72.png"><!-- iPad -->
<link rel="apple-touch-icon" type="image/png" sizes="114x114" href="icon.114.png"><!-- iPhone4 -->
<link rel="icon" type="image/png" href="icon.114.png"><!-- Opera Speed Dial, at least 144×114 px -->
Docs on Apple iOS icons: http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/ConfiguringWebApplications/ConfiguringWebApplications.html
Opera Speed Dial上的文档图标: http://dev. Opera.com/articles/view/opera-speed-dial-enhancements/
Docs on Opera Speed Dial icon: http://dev.opera.com/articles/view/opera-speed-dial-enhancements/