以前我们用过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. cf293E Close Vertices（树分治+BIT）

    E. Close Vertices You've got a weighted tree, consisting of n vertices. Each edge has a non-negative ...

  2. 彻底理解position与anchorPoint - Wonderffee's Blog（转）

    引言 相信初接触到CALayer的人都会遇到以下几个问题: 为什么修改anchorPoint会移动layer的位置?CALayer的position点是哪一点呢?anchorPoint与positio ...

  3. 阐明iOS证书和provision文件

    译:阐明iOS证书和provision文件 许多iOS开发人员都会和你说在iOS开发很困惑的问题之一,将app真正运行在真实的设备(iPhone iPad而不是模拟器),因为所有的这些都会涉及从苹果获 ...

  4. Spring学习总结

    spring是当前流行的一个框架.在学习spring之前当然的先准备一些jar包.可以在官网找找,(也可以留言,网盘分享): 基于IDEA环境学习. 第一天完成的任务: 1.使用spring框架输出一 ...

  5. [Spark] Pair RDD常见转化操作

    本篇博客中的操作都在 ./bin/pyspark 中执行. 对单个 Pair RDD 的转化操作 下面会对 Pair RDD 的一些转化操作进行解释.先假设我们有下面这些RDD(在pyspark中操作 ...

  6. 在Eclipse中怎样公布创建的JavaWebproject

    博客<在Eclipse中怎样创建JavaWebproject>中图文并茂的说明了Eclipse中创建JavaWebproject的方法:博客<怎样为Eclipse开发工具中创建的Ja ...

  7. 全文索引（三）lucene 分词 Analyzer

    分词: 将reader通过阅读对象Analyzer字处理,得到TokenStream处理流程被称为分割. 该解释可能是太晦涩.查看示例,这个东西是什么感性的认识. 样品:一段文本"this ...

  8. JQuery和UpdatePannel的问题

    转: http://www.cnblogs.com/Tim_Liu/archive/2010/11/25/1887937.html 最近在做一个项目,因为涉及到的字段数量很多所以想偷把懒,便使用了Up ...

  9. mysql日期时间函数2

    win7可以设定每周从哪一天开始,win2003等不能方便的修改.有的是周日开始,有的是周一开始.而工作中有的时候每周是从周六开始算的,有些数据需要按周统计,那么那种方式比较好呢?   通过下面的研究 ...

  10. GCC扩展（转--对看kernel代码有帮助

    http://my.oschina.net/senmole/blog?catalog=153878 Linux Kernel的代码,上次就发现一个结构体的定义形式看不懂,后来才知道它用的不是标准的AN ...