苹果触摸图标的网站
到目前为止，我已经在头脑中包括了Apple Touch图标，如下所示：
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
不过，在问答“苹果触摸图标的正确像素尺寸是多less？ 在接受的答案中指出，根据苹果的指导原则，现在需要三张图片。
那么如何将这些插入到代码的头部分呢？
这里你去，希望这有助于。
如果你想让苹果为你做点美感（添加光泽），那么你会把它们放在<head>标签中：
<link rel="apple-touch-icon" href="apple-touch-iphone.png" /> <link rel="apple-touch-icon" sizes="72x72" href="apple-touch-ipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-iphone4.png" /> <link rel="apple-touch-icon" sizes="144x144" href="apple-touch-ipad-retina.png" />
如果您想对图像进行预先组合 ，以便苹果在没有光泽的情况下进行显示，那么您可以这样做：
<link rel="apple-touch-icon-precomposed" href="apple-touch-iphone.png" /> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-ipad.png" /> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-iphone4.png" /> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-ipad-retina.png" />
如果您包含多个设备，iOS设备将会查找正确的尺寸并自动使用该图像。 从这个例子中的图像名称可以看出，带有视网膜显示屏的iPad需要一个144×144像素的图标，iPhone 4 / 4S / 5需要一个114×114像素的图标，原始的iPad（和iPad 2，作为屏幕分辨率也不例外）需要一个72×72像素的图标，而原始的iPhone不需要尺寸规格，但是供您参考的是57x57px。
苹果规格指定了iOS7的新尺寸：
- 60X60
- 76×76
- 120×120
- 152×152
而且对于iOS8 ：
- 180×180
另外，不赞成预先组合的图标。
因此，为了支持新设备（运行iOS7）和更老的（iOS6和之前的版本），通用代码是：
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
另外， 您应该创build一个名为apple-touch-icon.png的180×180图片 。
请注意，如果在HTML代码中找不到有趣的东西（有点像IE正在使用/favicon.ico 。 所以重要的是保持文件名在上面。 Android / Chrome也在使用这些图片也很重要。
你可能想知道这个图标生成器可以一次创build所有这些图片。 充分披露：我是这个网站的作者。
由于其中一些答案已经过时，我build议使用http://realfavicongenerator.net/来生成所有的图像和标记; – 我每次使用时都捐出几欧元，希望它能够保留最新的，目前在iOS，Android和Windows上有效，所以我不必。
我从来没有读过任何苹果规格，我必须承认，但根据我的网站上的日志，这些图像是必需的根：
apple-touch-icon-72x72.png apple-touch-icon-76x76.png apple-touch-icon-120x120.png apple-touch-icon-152x152.png apple-touch-icon-72x72-precomposed.png apple-touch-icon-76x76-precomposed.png apple-touch-icon-120x120-precomposed.png apple-touch-icon-152x152-precomposed.png
从我的拉请求到https://github.com/h5bp/mobile-boilerplate （带有iPhone 6图标）：
<!-- iPad and iPad mini (with @2× display) iOS ≥ 8 --> <link rel="apple-touch-icon-precomposed" sizes="180x180" href="img/touch/apple-touch-icon-180x180-precomposed.png"> <!-- iPad 3+ (with @2× display) iOS ≥ 7 --> <link rel="apple-touch-icon-precomposed" sizes="152x152" href="img/touch/apple-touch-icon-152x152-precomposed.png"> <!-- iPad (with @2× display) iOS ≤ 6 --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touch-icon-144x144-precomposed.png"> <!-- iPhone (with @2× and @3 display) iOS ≥ 7 --> <link rel="apple-touch-icon-precomposed" sizes="120x120" href="img/touch/apple-touch-icon-120x120-precomposed.png"> <!-- iPhone (with @2× display) iOS ≤ 6 --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch/apple-touch-icon-114x114-precomposed.png"> <!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7 --> <link rel="apple-touch-icon-precomposed" sizes="76x76" href="img/touch/apple-touch-icon-76x76-precomposed.png"> <!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6 --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch/apple-touch-icon-72x72-precomposed.png"> <!-- Android Stock Browser and non-Retina iPhone and iPod Touch --> <link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57-precomposed.png"> <!-- Fallback for everything else --> <link rel="shortcut icon" href="img/touch/apple-touch-icon.png"> <!-- Chrome 31+ has home screen icon 192×192 (the recommended size for multiple resolutions). If it's not defined on that size it will take 128×128. --> <link rel="icon" sizes="192x192" href="img/touch/touch-icon-192x192.png"> <link rel="icon" sizes="128x128" href="img/touch/touch-icon-128x128.png"> <!-- Tile icon for Win8 (144x144 + tile color) --> <meta name="msapplication-TileImage" content="img/touch/apple-touch-icon-144x144-precomposed.png"> <meta name="msapplication-TileColor" content="#222222">
指定Web剪辑的网页图标
您可能希望用户能够将您的Web应用程序或网页链接添加到主屏幕。 这些由图标表示的链接称为Web剪辑。 遵循这些简单的步骤来指定一个图标来表示您的iOS应用程序或网页。
要为整个网站（网站上的每个页面）指定一个图标，请在根文档文件夹中放置一个PNG格式的图标文件，称为apple-touch-icon.png
要为单个网页指定一个图标或者将网站图标replace为网页特定的图标，请向该网页添加一个链接元素，如下所示：
<link rel="apple-touch-icon" href="/custom_icon.png">
在上面的例子中，用你的图标文件名replacecustom_icon.png。 要为不同的设备分辨率指定多个图标（例如，支持iPhone和iPad设备），请按以下方式为每个链接元素添加大小属性：
<link rel="apple-touch-icon" href="touch-icon-iphone.png"> <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"> <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png"> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
使用最适合设备的图标。 如果未设置大小属性，则元素的大小默认为60 x 60.如果没有与设备的build议大小相匹配的图标，则会使用大于推荐大小的最小图标。 如果没有大于推荐尺寸的图标，则使用最大的图标。
如果没有使用链接元素指定图标，则使用apple-touch-icon …前缀search网站根目录中的图标。 例如，如果设备的适当图标大小为60 x 60，系统将按以下顺序search文件名：
apple-touch-icon-76x76.png apple-touch-icon.png
请参阅网页图标指标的图标和图片大小。
注意 ：iOS 7上的Safari不会为图标添加效果。 较早版本的Safari不会为使用-precomposed.png后缀命名的图标文件添加效果。 有关详细信息，请参阅第一步：在iTunes Connect中识别您的应用程序。
来源： 苹果触摸图标规格
