Html 网站的 Apple Touch 图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5110776/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Apple Touch icon for websites
提问by J82
Up to now, I've been including the line for the Apple Touch icon in my head like this:
到目前为止，我一直在脑海中包含 Apple Touch 图标的线条，如下所示：
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
However, in the Q&A "What are the correct pixel dimensions for an apple-touch-icon?"it is stated in the accepted answer that three images are now needed according to Apple's guidelines.
然而，在问答“苹果触摸图标的正确像素尺寸是多少？” 在接受的答案中指出，根据 Apple 的指导方针，现在需要三张图像。
So how would one go about inserting these into the head section of the code?
那么如何将这些插入到代码的头部呢？
回答by philippe_b
Minimalist solution - Recommended
极简解决方案 - 推荐
A common practice is to create a single 180x180 icon, which is the highest expected resolution, and let the iOS devices scale it down as needed. It is declared with:
一种常见的做法是创建一个 180x180 的图标，这是预期的最高分辨率，并让 iOS 设备根据需要缩小它。它声明为：
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
Exhaustive solution - Notrecommended
详尽的解决方案 -不推荐
Apple specsspecify new sizes for iOS7:
Apple 规范为 iOS7 指定了新尺寸：
- 60x60
- 76x76
- 120x120
- 152x152
- 60x60
- 76x76
- 120x120
- 152x152
- 180x180
- 180x180
In addition, precomposed icons are deprecated.
此外，不推荐使用预先组合的图标。
As a consequence, to support but new devices (running iOS7) and older (iOS6 and prior), the generic code is:
因此，为了支持新设备（运行 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">
In addition, you should create a 180x180 picture named apple-touch-icon.png.
此外，您应该创建一个名为 apple-touch-icon.png 的 180x180 图片。
Note that iOS looks for URL like /apple-touch-icon-76x76.png, if it does not find interesting stuff in the HTML code (a bit like what IE is doing with /favicon.ico). So it is important to keep the file names are they are above. It is also important to consider that Android/Chrome is also using these pictures.
请注意/apple-touch-icon-76x76.png，如果在 HTML 代码中没有找到有趣的东西（有点像 IE 正在做的事情/favicon.ico），iOS 会查找类似 的 URL 。所以保持文件名在上面很重要。同样重要的是要考虑到Android/Chrome 也在使用这些图片。
You might want to know that this favicon generatorcan create all these pictures at once. Full disclosure: I'm the author of this site.
您可能想知道这个网站图标生成器可以一次创建所有这些图片。完全披露：我是这个网站的作者。
回答by Charles Cooke
Here you go, hope this helps.
给你，希望这有帮助。
If you want Apple to do the aesthetic bit for you (add the gloss) then you'd put in these to the <head>tags:
如果您希望 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" />
If you want to precomposethe image, so that Apple displays it without the gloss, then you'd do this:
如果您想预先合成图像，以便 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" />
Providing you include more than one, the iOS device will look for the correct size and utilise that image automatically. As you can see from the names of the images in the example, the iPad with retina display needs an icon which is 144x144px, the iPhone 4/4S/5 needs an icon which is 114x114px, the original iPad (and iPad 2, as the screen resolution is no different) needs an icon which is 72x72px, and the original iPhone doesn't need a size specification, but for your reference it is 57x57px.
如果您包含多个，iOS 设备将寻找正确的尺寸并自动使用该图像。从示例中的图片名称可以看出，带有视网膜显示屏的 iPad 需要一个 144x144 像素的图标，iPhone 4/4S/5 需要一个 114x114 像素的图标，原始 iPad（和 iPad 2，作为屏幕分辨率没有什么不同）需要一个 72x72px 的图标，而原始 iPhone 不需要尺寸规格，但供您参考它是 57x57px。
回答by Tim Iles
Since a few of these answers are out of date already, I recommend using http://realfavicongenerator.net/to generate all the images and markup - I donate a couple euros each time I use it in the hope that it enables them to keep up to date as to what is currently valid on iOS, Android & Windows, so I don't have to.
由于其中一些答案已经过时，我建议使用http://realfavicongenerator.net/来生成所有图像和标记 - 我每次使用它时都会捐赠几欧元，希望它能让他们保持目前在 iOS、Android 和 Windows 上有效的内容是最新的，所以我不必这样做。
回答by Pedro Ferrari
As of 2018, Apple Developers Websiterecommends the following for iOS devices:
截至 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">
App Title will replace your website title. Usually, you'd want that. Startup image is what will appear while the app is launching.
应用标题将替换您的网站标题。通常，你会想要那个。启动图像是应用程序启动时将显示的内容。
回答by Pedro Ferrari
Specifying a Webpage Icon for Web Clip
为 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.
您可能希望用户能够将您的 Web 应用程序或网页链接添加到主屏幕。这些由图标表示的链接称为 Web Clips。按照这些简单的步骤指定一个图标来代表您在 iOS 上的 Web 应用程序或网页。
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
要为整个网站（网站上的每个页面）指定一个图标，请将一个 PNG 格式的图标文件放在名为 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:
在上面的示例中，将 custom_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">
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.
使用最适合设备大小的图标。如果没有设置尺寸属性，元素的尺寸默认为 60 x 60。如果没有与设备推荐尺寸匹配的图标，则使用大于推荐尺寸的最小图标。如果没有大于推荐大小的图标，则使用最大的图标。
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... 前缀的图标。例如，如果设备的适当图标大小为 60 x 60，系统将按以下顺序搜索文件名：
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.
注意：iOS 7 上的 Safari 不会为图标添加效果。旧版本的 Safari 不会为以 -precomposed.png 后缀命名的图标文件添加效果。有关详细信息，请参阅第一步：在 iTunes Connect 中识别您的应用程序。
Source: Apple touch icon specs
来源：Apple 触摸图标规格
回答by Pinal
From my pull-request to https://github.com/h5bp/mobile-boilerplate(with iPhone 6 icons):
从我的拉取请求到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">
回答by Tomá? Zato - Reinstate Monica
I have never read any apple specs, I must admit, but according to logs on my site, these images are required in root:
我必须承认，我从未阅读过任何苹果规格，但根据我网站上的日志，这些图像在 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
