将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 -->

Apple iOS图标上的文档: http ://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/ConfiguringWebApplications/ConfiguringWebApplications.html

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/