iPad和iPhone的Safari“添加至主屏幕”功能如何自定义图标

概述最近需要做一个类似safari的“添加至主屏幕”的功能，不知道那些icon是从哪来的， 研究了一番，其实很简单，是在页面的head元素中。 如下是网易页面中的： <link href="http://img1.cache.netease.com/3g/img11/3gtouch/apple-touch-icon-57x57-precomposed.png" rel="apple-touch-ico

最近需要做一个类似safari的“添加至主屏幕”的功能，不知道那些icon是从哪来的，

研究了一番，其实很简单，是在页面的head元素中。

如下是网易页面中的：

<link href="http://img1.cache.netease.com/3g/img11/3gtouch/apple-touch-icon-57x57-precomposed.png" rel="apple-touch-icon-precomposed"> <link href="http://img1.cache.netease.com/3g/img11/3gtouch/apple-touch-icon-114x114-precomposed.png" sizes="114x114" rel="apple-touch-icon-precomposed">   下面这个是新浪的 <link href="http://u1.sinaimg.cn/3g/image/upload/0/110/176/19509/64477c90.png?pos=102&vt=4" rel="apple-touch-icon">   icon.png的尺寸是114×114，不需要做圆角和高光，iPad会自动加。

PS:如果不做如上设置，则iPad会对网页截图并做为图标。

 

另外发现有些网站页面里没有相关字段，但是safari也能下载到图标，抓了一下包分析了一下，原来如果页面里没有，safari还会默认访问以下地址：

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

……

  关于 apple-touch-icon-precomposed和 apple-touch-icon的区别，参考文章： 苹果图标apple-touch-icon-precomposed和apple-touch-icon两种设置的区别探究

 

苹果safari浏览器当中apple-touch-icon-precomposed 和 apple-touch-icon属性是有区别的，之前在网上查了下相关的资料和苹果的开发文档手册，对这两中属性区别说的不够详细，导致现在大家开发的时候有些混淆。

苹果safari浏览器定义的这两种属性是为了苹果移动设备（ipod、ipad、iphone）对移动网站-mobile web进行收藏（“添加到桌面图标”）的时候增加的图标定义属性，当你建立一个移动网站（俗称：手机站，mobile web），避免不了为移动站的图标进行设置（这里有篇关于苹果Meta设置详解的文章>>点击查看<<），在这篇文章当中尚未介绍这两中属性的区别，这篇文章就是弥补这一空缺。

图标设置的属性分为：

apple-touch-icon 和 apple-touch-icon-precomposed两种属性，从字面意思上可以看出，第一个是 “苹果移动设备图标”，第二个为“苹果移动设备初始图标样式”，由于第二个的意思完全搞不明白预设是预设的什么究竟有什么不同的地方，从官方资料当中也没有搞懂有什么明显的不同，通过实验得知了这两个明显的差异。

直接上图：

图片一:

从图中（图片一）右下角可以看出有两个Milanoo图标，分别是apple-touch-icon 和 apple-touch-icon-precomposed属性的图标，看出区别了没？

放大看大图：注意图标上面的光泽感，看明白了吧，使用apple-touch-icon属性的明显比使用apple-touch-icon-precomposed图标多出一个高光，因为在ios系统中对icon有一套规范，就是在ios设备的图标统一为“四边圆角”、“高光处理”，至于“图标阴影”，是ios设备中统一为所有桌面元素增加的，所以不作为图标单独处理的样式，由于在视觉上统一最重要的是形状的统一，所以“圆角”是必须的，但是对于“高光”苹果没有做出特别的强调，所以苹果设置当中把“高光”作为可选项，就产生了apple-touch-icon 和 apple-touch-icon-precomposed属性。

结论：

使用apple-touch-icon属性为“增加高光光亮的图标”； 使用apple-touch-icon-precomposed属性为“设计原图图标”；

大家牢记了，说了通篇感觉最有用的就是最后两句。哈哈。

总结

以上是内存溢出为你收集整理的iPad和iPhone的Safari“添加至主屏幕”功能如何自定义图标全部内容，希望文章能够帮你解决iPad和iPhone的Safari“添加至主屏幕”功能如何自定义图标所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。