以前我们用过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.

关于Apple设备私有的apple-touch-icon属性详解的更多相关文章

  1. Icon资源详解[2]

    本文分享&备忘最近了解到的icon资源在windows平台下相关的一部分知识.所有测试代码都尽可能的依赖win32 API实现.通过源码可以了解其结构,同时它们也是可复用的代码积累.     ...

  2. Linux设备驱动模型之platform(平台)总线详解

    /********************************************************/ 内核版本:2.6.35.7 运行平台:三星s5pv210 /*********** ...

  3. Icon资源详解[1]

    本文分享&备忘最近了解到的icon资源在windows平台下相关的一部分知识,所有测试代码都尽可能的依赖win32 API实现.更全面的知识,参考文末列出的”参考资料“.      关键字:I ...

  4. UIView的Touch事件UIControlEvents详解

    首先,UIControlEvents有这个几种: UIControlEventTouchDown = << , // on all touch downs UIControlEventTo ...

  5. 移动设备web开发插件iScroll的使用详解

    地址:http://blog.nnnv.cn/index.php/archives/65

  6. 网络电话pjsip Getting Started: Building for Apple iPhone, iPad and iPod Touch

    Getting Started: Building for Apple iPhone, iPad and iPod Touch ¶ Getting Started Preparation Get th ...

  7. 如何将多个 Apple 设备中保存在 iCloud 里面密码同步

    如何将多个 Apple 设备中保存在 iCloud 里面密码同步 iCloud 钥匙串 密码同步 数据迁移 iOS iCloud 钥匙串会记住一些信息,因此您就无需记忆这些信息. 它会在您批准的任何设 ...

  8. 苹果新专利详解Apple Pay和NFC工作原理

    本周,美国专利商标局公布了苹果一项名为“在移动支付过程中调节NFC的方法”专利申请.专利文件中详细描述了苹果Apple Pay功能以及NFC硬件构架和工作模式. 首先,苹果在专利文件中介绍了其无接触支 ...

  9. Android中处理Touch Icon的方案

    苹果的Touch Icon相对我们都比较熟悉,是苹果为了支持网络应用(或者说网页)添加到桌面需要的图标,有了这些Touch Icon的网页链接更加和Native应用更相像了.由于苹果设备IPod,IP ...

随机推荐

  1. Linux编辑器的选择使用

    在执行 crontab -e的时候 发现编辑器不对 用的是nano 立刻 sudo select-editor 然后终端返回 Select an editor. To change later, ru ...

  2. （转）关闭WordPress自动加载的Open Sans字体，总是连接googleapi.com，导致打开wordpress很慢

    转自http://www.xuanfengge.com/turn-off-automatic-loading-wordpress-open-sans-fonts.html 一.'在网上搜了一番,有四种 ...

  3. 关于Ajax&初见Ajax

    Ajax实现的效果 究竟Ajax能实现什么功能呢?今天下午学习了一下Ajax,现在跟大家分享一下我的学习心得.Ajax是什么?工作机制又是什么?可能不大准确,只是我个人看了视频学习后的一点点看法. A ...

  4. leetcode__Convert Sorted List to Binary Search Tree

    Convert Sorted List to Binary Search Tree Total Accepted: 12283 Total Submissions: 45910My Submissio ...

  5. 非常全面的java基础笔试题

    下面是java基础笔试题,当时我去笔试,做了1个小时(80道选择题,后面的简答题就没时间做了),结果很吓人,太挫了,最后被面试官忽悠去培训去了,呵呵.我偷偷把面试题弄了下来,用来学习吧,也希望能对你们 ...

  6. iOS 开发之 ReactiveCocoa(基础)

    前言 前段时间在看Masonry这个全新的第三方的布局框架的时候,开始了解了链式编程.后来慢慢的又开始了解函数式编程和响应式编程.在这集中的编程思想下,开始接触和研究了ReactiveCocoa这个框 ...

  7. android开发之SwipeListView的使用

    实现一种类似于qq中滑动列表的功能: 向左或者向右滑动,然后执行相关操作. 这里用到的是GitHub上的开源控件SwipeListView,下载地址https://github.com/47deg/a ...

  8. Android 自定义View修炼-自定义可动画展开收缩View的实现

    有时候需要点击一个view可以动画展开和收缩折叠一个View这样的效果,这样就可以直接自定义View来实现. 本例中,采用继承FrameLayout来实现自定义的ExpandView.下面将详细介绍各 ...

  9. Android开发之使用广播监听网络状态变化

    我们经常需要判断网络状态的变化,如有无网络,所以需要监听网络状态的变化,比如网络断开,网络连接给予友好提示.如何监听网络状态的变化呢,最近工作中需要用到这个,于是就用广播机制来实现了网络状态的监听. ...

  10. Linux下搭建Oracle11g RAC(7)----安装Oracle 软件

    从此步骤开始,我们正式安装oracle软件: ① 以oracle用户登录图形界面,执行/home/oracle/database/runInstaller,进入OUI的图形安装界面: ② 进入OUI安 ...