以前我们用过favicon在浏览器给网站进行身份标识，用法如下：
- <link href="http://image.feeliu.com/web/favicon.ico" rel="shortcut icon" />
- <link href="http://image.feeliu.com/web/favicon.ico" rel="Bookmark" />
现今移动设备越来越多，苹果为iOS设备配备了apple-touch-icon私有属性，添加该属性，在iPhone,iPad,iTouch的safari浏览器上可以使用添加到主屏按钮将网站添加到主屏幕上，方便用户以后访问。实现方法是在HTML文档的<head>标签加入下面代码即可。
- <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
所以最完善的写法应该是：
- <link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png" />
- <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
- <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
- <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就会根据情况自动进行缩放了。
- <!-- Standard iPhone -->
- <link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone-114.png" />
- <!-- Retina iPhone -->
- <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-114.png" />
- <!-- Standard iPad -->
- <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-144.png" />
- <!-- Retina iPad -->
- <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
相关推荐
<link rel="apple-touch-icon" href="/apple-touch-icon.png"/> HTML5标签<link rel="apple-touch-icon" 标签是干什么用的?
iOS通用链接（Universal Links），服务器端部署apple-app-site-association配置文件
iOS开发Universal Links功能配置的文件格式，直接更改id内容就可以使用，文件名称为apple-app-site-association，配置过程：https://blog.csdn.net/ljc_563812704/article/details/105042215
iOS Universal links 配置文件
这是一份更新至2022年5月的APPLE 苹果官方资料 里面有所有过往苹果产品的相关资料，产品尺寸，规格，参数。 用于产品周边外设产品的设计指导书
声卡配置工具 AppleALC-1.4.6-RELEASE声卡配置工具 AppleALC-1.4.6-RELEASE声卡配置工具 AppleALC-1.4.6-RELEASE声卡配置工具 AppleALC-1.4.6-RELEASE声卡配置工具 AppleALC-1.4.6-RELEASE声卡配置工具 AppleALC-...
标题“Apple-Music-100-Best-Albums-hero.zip”揭示了这个压缩包文件的内容，它很可能是与Apple Music平台上的“100最佳专辑”相关的一个资源集合。Apple Music是苹果公司提供的一项流媒体音乐服务，拥有海量的音乐...
标题中的“apple-电脑-ipad-充电”表明我们讨论的主题是关于Apple的iPad在非Mac电脑上充电的问题。描述进一步细化了，指出我们要解决的是Apple产品（可能包括iPhone、iPad或其他iDevice）与非Apple（非Mac）电脑连接...
Apple Developer Agreement - Register - Apple Developer.webarchive
5. **apple-touch-icon**系列文件：这些是苹果设备（如iPhone和iPad）上的触摸图标，用于在用户的主屏幕或Safari浏览器中以高质量显示网站图标。不同尺寸的图标是为了适应不同分辨率的设备，确保图标在各种屏幕尺寸...
《Apple-SignInWithApple-UnityDemo：苹果登录在Unity中的实现详解》 Apple Sign In with Apple 是苹果公司推出的一种安全、隐私保护的用户身份验证服务，它允许用户使用自己的Apple ID来登录非Apple设备上的应用...
同时，理解`shortcut icon`和`icon`以及`apple-touch-icon`的区别，有助于确保网站在各种设备和浏览器上都能正确显示图标，提升用户体验。在实际开发中，应根据目标用户群和设备类型来选择合适的图标类型和尺寸。
本文将深入探讨Blender3.0版本中关于苹果3D模型的创建、纹理贴图的应用以及PBR（物理渲染）的原理，以解压缩包"blender3.0-apple-01-module-res.zip"中的资源为实例，帮助读者理解并掌握相关知识。 首先，我们关注...
Transporter上传appstore上传慢、上传失败的原因是 ~/Library/Caches/com.apple.amp.itmstransporter 目录需要下载大量缓存文件。 1、下载该资源直接代替 ~/Library/Caches/com.apple.amp.itmstransporter ...