在网站中添加苹果图标

Question

我用Woorank测试了我的网站，发现缺少苹果图标的警告。

我已经搜索过了，但不确定如何包含这个图标，我找到了这段代码

<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" />

我需要在头部像标准favicon一样包含这些行吗？（我的网站是HTML5）

这些行中第一张图像的分辨率是多少 "apple-touch-iphone.png"

- Asgard

Answer 1

最小的图标应该是57×57像素。

请注意，“-precomposed”表示链接的图标文件已经闪亮且呈3D效果。如果不使用“-precomposed”，iOS会对图像添加3D光彩效果。

当然，你需要将link标签插入到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 -->

苹果iOS图标文档: 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/

- feeela

---

谢谢。我没有阅读其余内容，因为我在另一个问题中找到了这段代码，但没有链接到完整的苹果文档。 - Asgard