到目前为止，我一直在脑海中包含 Apple Touch 图标的行，如下所示：
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
但是，在问答“苹果触摸图标的正确像素尺寸是多少？” 在接受的答案中指出，根据 Apple 的指南，现在需要三张图像。
那么如何将这些插入到代码的头部呢？
问问题
108873 次
8 回答
107
极简主义解决方案 - 推荐
一种常见的做法是创建一个 180x180 图标，这是预期的最高分辨率，并让 iOS 设备根据需要将其缩小。它声明为：
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
详尽的解决方案 -不推荐
Apple 规范为 iOS7 指定了新尺寸：
- 60x60
- 76x76
- 120x120
- 152x152
- 180x180
此外，不推荐使用预先组合的图标。
因此，为了同时支持新设备（运行 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">
此外，您应该创建一个名为 apple-touch-icon.png 的 180x180 图片。
请注意，/apple-touch-icon-76x76.png如果 iOS 在 HTML 代码中没有找到有趣的东西（有点像 IE 正在做的事情/favicon.ico），它会寻找类似 的 URL。所以保持文件名在上面很重要。同样重要的是要考虑Android/Chrome 也在使用这些图片。
您可能想知道这个网站图标生成器可以一次创建所有这些图片。完全披露：我是本网站的作者。
于 2014-01-15T17:59:52.067 回答
71
给你，希望这有帮助。
如果您希望 Apple 为您做一些美学设计（添加光泽），那么您可以将这些添加到<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" />
如果您想预先合成图像，以便 Apple 显示它而没有光泽，那么您可以这样做：
<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 需要一个 144x144px 的图标，iPhone 4/4S/5 需要一个 114x114px 的图标，原来的 iPad（和 iPad 2，作为屏幕分辨率没有什么不同）需要一个 72x72px 的图标，而原始 iPhone 不需要尺寸规格，但供您参考，它是 57x57px。
于 2011-04-12T12:16:32.237 回答
16
由于其中一些答案已经过时，我建议使用http://realfavicongenerator.net/生成所有图像和标记 - 我每次使用它时都会捐赠几欧元，希望它能让他们保持关于 iOS、Android 和 Windows 上当前有效的内容是最新的，所以我不必这样做。
于 2015-06-24T10:58:22.407 回答
7
截至 2018 年，Apple 开发者网站为 iOS 设备推荐以下内容：
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-startup-image" href="/launch.png">
<meta name="apple-mobile-web-app-title" content="AppTitle">
应用标题将替换您的网站标题。通常，你会想要那个。启动图像是应用程序启动时将出现的图像。
于 2018-01-07T16:43:47.797 回答
6
Specifying a Webpage Icon for Web Clip
You may want users to be able to add your web application or webpage link to the Home screen. These links, represented by an icon, are called Web Clips. Follow these simple steps to specify an icon to represent your web application or webpage on iOS.
To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png
To specify an icon for a single webpage or replace the website icon with a webpage-specific icon, add a link element to the webpage, as in:
<link rel="apple-touch-icon" href="/custom_icon.png">
In the above example, replace custom_icon.png with your icon filename. To specify multiple icons for different device resolutions—for example, support both iPhone and iPad devices—add a sizes attribute to each link element as follows:
<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">
The icon that is the most appropriate size for the device is used. If no sizes attribute is set, the element’s size defaults to 60 x 60. If there is no icon that matches the recommended size for the device, the smallest icon larger than the recommended size is used. If there are no icons larger than the recommended size, the largest icon is used.
If no icons are specified using a link element, the website root directory is searched for icons with the apple-touch-icon... prefix. For example, if the appropriate icon size for the device is 60 x 60, the system searches for filenames in the following order:
apple-touch-icon-76x76.png
apple-touch-icon.png
See Icon and Image Sizes for webpage icon metrics.
Note: Safari on iOS 7 doesn’t add effects to icons. Older versions of Safari will not add effects for icon files named with the -precomposed.png suffix. See First Steps: Identifying Your App in iTunes Connect for details.
Source: Apple touch icon specs
于 2015-05-10T14:57:58.653 回答
3
从我的拉取请求到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">
于 2014-10-14T10:26:07.160 回答
2
我必须承认，我从未阅读过任何苹果规格，但根据我网站上的日志，这些图像在 root 中是必需的：
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
于 2014-05-20T10:55:45.243 回答
