以前我们用过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. mysql忘记帐号密码 解决办法

    首先关闭mysql 使用命令行启动mysql(一般要找到mysql.ini文件) 在windows上mysql.ini文件可以通过查看当前mysql进程参数查看到,具体方法点此 在启动mysql命令行 ...

  2. 如何在 CentOS 7 上安装 Redis 服务器

    大家好,本文的主题是 Redis,我们将要在 CentOS 7 上安装它.编译源代码,安装二进制文件,创建.安装文件.在安装了它的组件之后,我们还会配置 redis ,就像配置操作系统参数一样,目标就 ...

  3. 普通Windows控制台窗口运行nmake编译VC

    我的GDAL编译都是在VS2012提供的prompt windows里面运行nmake完成的.但是如果想将编译自动化,放到Jenkins里面怎么办呢?首先没有VS2012的工程,也不想费力去生成一个, ...

  4. java接口相关例题

    java接口相关习题 interface Graphics{  //接口里面只能用抽象方法  public abstract double area();    }//设置 平面类class Plan ...

  5. 【转】关于onActivityResult方法不执行的问题汇总

    首先说说本人碰到的于onActivityResult不执行的情况.(网上找了很久都没有人碰到) 1.直接上代码说明 ActivityA的代码:(放在onCreate方法中) Intent intent ...

  6. CPP: 跨平台生成GUID/UUID

    #ifndef XGUID_H#define XGUID_H #include <string>#include <stdio.h>#ifdef WIN32#include & ...

  7. JDBC Transaction Management Example---reference

    In this post, we want to talk about JDBC Transactions and how we can manage the operations in a data ...

  8. An NIO.2 primer--reference

    Part 1: The asynchronous channel APIs The More New I/O APIs for the Java™ Platform (NIO.2) is one of ...

  9. java web 一次请求从开始到响应结束的过程

    博客原文:   http://www.cnblogs.com/yin-jingyu/archive/2011/08/01/2123548.html   HTTP(HyperText Transfer ...

  10. 通过开发工具发布web应用到tomcat服务器中--对于小白，大神可以忽略不看，勿喷，谢谢

    需要的工具 MyEclipse和TomCat 本人用的是MyEclipse2014和TomCat7 TomCat结构图 第一步:在MyEclipse中配置TomCat 如图所示: 第二步:创建Web项 ...