作为网站运营者来说，当然是希望自己的网站兼容性更好，虽然子凡平时用的都是 Windows 和 Android 系列系统，偶尔也用用我们家薛漂亮的苹果系列，这时候就会发现使用苹果 Safari 浏览器收藏网址的时候，有的网站就会显示 LOGO 图标，甚是好看，而自己家的网站却显示一个灰色的字，可以说是相对的丑了，也没有调用网站的 favicon.ico，这是因为苹果有独有的 apple-touch-icon 私有属性。

习惯看别人网站源码的很多朋友应该很容易就能发现区别，一些大站点会在 html 的 head 头部中添加 apple-touch-icon 属性，这其实就是专门针对苹果浏览器设备支持的一个图标配置，简单的配置如下：

1
2
3

<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

如果不想系统对图标添加效果，可以用 apple-touch-icon-precomposed 代替 apple-touch-icon，这时我们提供的图标就要自己做圆角和高亮效果了。

1

<link rel="apple-touch-icon-precomposed" sizes="150x150" href="apple-touch-icon.png">

所实话，子凡我是没太搞明白 apple-touch-icon-precomposed 和 apple-touch-icon 这两个属性，当然如果为了更好的兼容性而在网站所有的页面都加上个三四行这种不痛不痒的为了兼容苹果 Safari 浏览器收藏图标，未免把整个网站都做得有些臃肿了，子凡我是绝对接受不了这种严重的代码冗余的。

最后子凡给大家一个最简单的办法，放置一个尺寸为 180x180px，图片名称为 apple-touch-icon.png 的图片文件在网站根目录即可。

如果部队图标添加效果，就直接命名为 apple-touch-icon-precomposed.png 的图片文件即可，当然也可以两个文件都放置在网站根目录。

提示：虽然官方都用的 png 图片做说明，但实际测试 jpg 格式也可用（不推荐），图片无需做圆角和高光效果，同 Native App 一样，系统会自动为图标添加圆角及高光。

w.haolusi.com

本文链接：https://w.haolusi.com/apple-touch-icon-png.html