我用Woorank测试了我的网站,并显示有关Apple Icon缺失的警告。
我已搜索但我不确定如何包含此图标,我已找到此代码
<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)
这些行中第一批图片的分辨率“apple-touch-iphone.png”
答案 0 :(得分:5)
最小的图标应为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 -->
Opera Speed Dial图标上的文档:http://dev.opera.com/articles/view/opera-speed-dial-enhancements/