apple-touch-icon

时间 2019-11-18

标签 apple touch icon 栏目 MacBook 繁體版

原文原文链接

在iPhone,iPad,iTouch的safari上能够使用添加到主屏按钮将网站添加到主屏幕上。apple-touch-icon是IOS设备的私有标签，若是设置了相应apple-touch-icon标签，则添加到主屏上的图标会使用指定的图片。在<head></head>区域加入下面代码便可。html

<link rel="apple-touch-icon" href="/custom_icon.png"/>

apple-touch-icon 标签支持sizes属性，能够用来放置对应不一样的设备。app

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

分别放置57x57（默认值）的图标对应320x640的老设备，72x72对应ipad，114x114对应retina屏的iPhone及iTouch。因为手头没有iPad3，因此没测试是否支持144x144的图标在iPad3上的显示。iphone

虽然官方都用的png图片作说明，但实际测试jpg格式也可用（不推荐），图片无需作圆角处理，同Native App同样，系统会自动为图标添加圆角及高光。若是不想系统对图标添加效果，能够用apple-touch-icon-precomposed代替apple-touch-icon。ide

图标搜索的优先级以下：post

若是没有跟相应设备推荐尺寸一致的图标，那个会优先使用比推荐尺寸大，但最接近推荐尺寸的图标。
若是没有比推荐尺寸大的图标，会优先选择最接近推荐尺寸的图标。
如些有多个图标符合推荐尺寸，会优先选择包含关键字precomposed的图标。

若是未在区域指定用link标签指定图标，会自动搜索网站根目录下有apple-touch-icon...或者 apple-touch-icon-precomposed…前缀的图标。如设备推荐尺寸为57x57,优先级以下：测试

apple-touch-icon-57x57-precomposed.png
apple-touch-icon-57x57.png
apple-touch-icon-precomposed.png
apple-touch-icon.png

偷懒的方法，能够直接设置一个最大尺寸的图标，如我测试使用一个114x114大小的图标，在iPhone4以及iPad2上均可以正常显示。以上内容在iPhone4以及iPad2上测试经过。网站

参考网址:
Safari Web Content Guide -- Configuring Web Applicationsui

转 http://motype.org/post/design/apple-touch-iconspa