以前我们用过favicon在浏览器给网站进行身份标识，用法如下：

  1. <link href="http://image.feeliu.com/web/favicon.ico" rel="shortcut icon" />
  2. <link href="http://image.feeliu.com/web/favicon.ico" rel="Bookmark" />

现今移动设备越来越多，苹果为iOS设备配备了apple-touch-icon私有属性，添加该属性，在iPhone,iPad,iTouch的safari浏览器上可以使用添加到主屏按钮将网站添加到主屏幕上，方便用户以后访问。实现方法是在HTML文档的<head>标签加入下面代码即可。

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

apple-touch-icon 标签支持sizes属性，可以用来放置对应不同的设备。

57×57（默认值）的图标对应320×640的iphone老设备，72×72对应ipad，114×114对应retina屏的iPhone及iTouch。ipad3对应144×144的高分辨率。

这是官方开发社区的详细介绍：

Create different sizes of your app icon for different devices. If you’re creating a universal app, you need to supply app icons in all four sizes.

For iPhone and iPod touch both of these sizes are required:

  • 57 x 57 pixels

  • 114 x 114 pixels (high resolution)

For iPad, both of these sizes are required:

  • 72 x 72 pixels

  • 144 x 144 (high resolution)

When iOS displays your app icon on the Home screen of a device, it automatically adds some visual effects to your icon so that it coordinates with the built-in icons on the Home screen. Specifically, iOS adds:

  • Rounded corners

  • Drop shadow

  • Reflective shine (unless you prevent the shine effect)

Note: You can prevent the addition of all effects by naming your icon apple-touch-icon-precomposed.png (this is available in iOS 2 and later).

Ensure your icon is eligible for the visual enhancements iOS adds (if you want them). You should produce an image in PNG format that:

Has 90° corners

Does not have any shine or gloss

所以最完善的写法应该是：

  1. <link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png" />
  2. <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
  3. <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
  4. <link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-ipad3-144.png" />

虽然官方都用的png图片做说明，但实际测试jpg格式也可用（不推荐），图片无需做圆角和高光效果，同Native App一样，系统会自动为图标添加圆角及高光。如果不想系统对图标添加效果，可以用apple-touch-icon-precomposed代替apple-touch-icon，这时我们提供的图标就要自己做圆角和高亮效果了。

图标搜索的优先级如下：

如果没有跟相应设备推荐尺寸一致的图标，那个会优先使用比推荐尺寸大，但最接近推荐尺寸的图标。

如果没有比推荐尺寸大的图标，会优先选择最接近推荐尺寸的图标。

如些有多个图标符合推荐尺寸，会优先选择包含关键字precomposed的图标。

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

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

apple-touch-icon-57×57.png

apple-touch-icon-precomposed.png

apple-touch-icon.png

在第三代 iPad 上有四种图标规格： 57x57, 72x72, 114x114, 144x144.

由于 retina 图标的尺寸是标准图标大小的2倍，因此实际上我们只需要只做2款图标即可：114 x 114 和 144 x 144 。 将retina 图标的大小设置成标准图标的尺寸，那么IOS就会根据情况自动进行缩放了。

  1. <!-- Standard iPhone -->
  2. <link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone-114.png" />
  3. <!-- Retina iPhone -->
  4. <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-114.png" />
  5. <!-- Standard iPad -->
  6. <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-144.png" />
  7. <!-- Retina iPad -->
  8. <link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-144.png" />

官方开发社区《iOS Human Interface Guidelines》地址http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html

webapp之路--之ios上图标的更多相关文章

  1. APP图标设计小技巧：在iOS上快速获得APP图标的真实预览图

    严格来说,这并不是一篇关于前端开发的文章,因为涉及到的知识非常浅.这只是一个向设计狮们分享的小经验,只是其中用到了一些前端内容. 最近接了个私活,了解到一个初创公司正在高价悬赏Logo(主要用于APP ...

  2. 微信双开是定时炸弹？关于非越狱iOS上微信分身高危插件ImgNaix的分析

    作者:蒸米@阿里移动安全 序言 微信作为手机上的第一大应用,有着上亿的用户.并且很多人都不只拥有一个微信帐号,有的微信账号是用于商业的,有的是用于私人的.可惜的是官方版的微信并不支持多开的功能,并且频 ...

  3. [转]简析 IOS 程序图标的设计

    表现形态**** 在有限的空间里表达出相对应的信息,在IOS 程序图标设计中,直观是第一个解决的问题,不应该出现大多繁琐的修饰,当然还要有很好的视觉表现力,使用户可以更容易理解此应用的实际作用,更轻松 ...

  4. 细数iOS上的那些安全防护

    细数iOS上的那些安全防护  龙磊,黑雪,蒸米 @阿里巴巴移动安全 0x00 序 随着苹果对iOS系统多年的研发,iOS上的安全防护机制也是越来越多,越来越复杂.这对于刚接触iOS安全的研究人员来说非 ...

  5. 云计算之路-阿里云上：从ASP.NET线程角度对“黑色30秒”问题的全新分析

    在这篇博文中,我们抛开对阿里云的怀疑,完全从ASP.NET的角度进行分析,看能不能找到针对问题现象的更合理的解释. “黑色30秒”问题现象的主要特征是:排队的请求(Requests Queued)突增 ...

  6. ios上position:fixed失效问题

    手机端上的猫腻真是多啊~~~ 此起彼伏! 最近又遇到了 固定定位的底部导航在ios上被弹出去 此时内心1w+个草泥马奔过~~~~~~~~ 直接上解决方案: <div class="ma ...

  7. :active 为什么在ios上失效

    :active是针对鼠标,而手机上是没有鼠标,而是touchstart,所以早成了ios上不兼容 解决方法是: window.onload = function(){ document.body.ad ...

  8. 解决protobuf不能直接在IOS上使用，利用protobuf-net在IOS上通讯

    ---------------------------------------------------------------------------------------------------- ...

  9. iOS上简单推送通知（Push Notification）的实现

    iOS上简单推送通知(Push Notification)的实现 根据这篇很好的教程(http://www.raywenderlich.com/3443/apple-push-notification ...

随机推荐

  1. text-size-adjust的值为100% 代替值 none

    iPhone 横屏默认会放大文字,设置text-size-adjust会解决这个问题 一般用text-size-adjust:none 但建议用100%代替none text-size-adjust: ...

  2. git 使用整理

    git使用 Ubuntu 14.04 安装 apt-get install git 版本查看 git --version git version 配置(全局变量,默认值.可在具体仓库中设置改仓库使用的 ...

  3. PAC全自动脚本代理

    Proxy 极低成本绕过GFW的一个PAC代理 Download proxy.zip Proxy 轻量级的FQ工具,不需要安装客户端.可以设置系统代理,也可以设置浏览器代理或者配合SS等插件使用. 免 ...

  4. ul li排版 左右对齐

    定义两个ul的class, 一个向左浮动, 一个向右浮动 #navtop{      width:100%;      height:46px;      background-color:#ecf0 ...

  5. /etc/rc.local 与 /etc/init.d Linux 开机自动运行程序

    1. /etc/rc.local 这是使用者自订开机启动程序,把需要开机自动运行的程序写在这个脚本里 --------引用---------------------- 在完成 run level 3 ...

  6. QQ 自动接收远程连接之关闭了远程桌面

    之前使用都好好的,后来就不知道怎么了突然就不行了,在另外一个远程桌面软件(向日葵)失效后,木有办法,查查查,终于查出来了,是我本机的时间服务停止了,导致我本机的时间和服务器时间不一致,所以连接不上.只 ...

  7. MyBatis-xml配置SQL文件中，传入List数组、基本类型String、int……、与自定义类型的方法

    //基本类型 @Override public String queryItemNumber(String packId) throws Exception { // TODO Auto-genera ...

  8. HTML day03表格与表单

    1.表格 一般格式: <table> <thead><!--表格头--> <tr> <th></th> </tr>& ...

  9. 软件设计模式详解:OCP原则

    看到两篇关于OCP的文章, 纳之. 原文:  http://www.cnblogs.com/muzongyan/archive/2010/08/05/1793454.html http://blog. ...

  10. 从市场运营角度谈Uber中国的第一批用户是怎么来的

    声明:这篇文章是从http://www.010lm.com/redian/2016/0312/1206875.html转来的,分享给大家. 1)首先告诉用户Uber是做什么的?即培养用户品牌意识. 我 ...