网站的 Apple Touch 图标
[英]Apple Touch icon for websites
问题描述
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">
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?那么如何将这些插入到代码的头部呢？
8 个解决方案
解决方案1
104 2014-01-15 17:59:52
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.一种常见的做法是创建一个 180x180 的图标，这是预期的最高分辨率，并让 iOS 设备根据需要缩小它。 It is declared with:它声明为：
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
Exhaustive solution - Not recommended详尽的解决方案 -不推荐
Apple specs specify new sizes for iOS7: Apple 规范为 iOS7 指定了新尺寸：
- 60x60 60x60
- 76x76 76x76
- 120x120 120x120
- 152x152 152x152
And also for iOS8 : 也适用于 iOS8 ：
- 180x180 180x180
In addition, precomposed icons are deprecated.此外，不推荐使用预先组合的图标。
As a consequence, to support both 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 ).请注意，iOS 会查找类似/apple-touch-icon-76x76.png URL，如果它在 HTML 代码中没有找到有趣的内容（有点像 IE 对/favicon.ico所做的/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 .同样重要的是要考虑到Android/Chrome 也在使用这些图片。
You might want to know that this favicon generator can create all these pictures at once.您可能想知道这个网站图标生成器可以一次创建所有这些图片。 Full disclosure: I'm the author of this site.完全披露：我是这个网站的作者。
解决方案2
71 2011-04-12 12:16:32
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 precompose the 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.如果您包含多个，iOS 设备将寻找正确的尺寸并自动使用该图像。 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.从示例中的图片名称可以看出，带有视网膜显示屏的 iPad 需要一个 144x144px 的图标，iPhone 4/4S/5 需要一个 114x114px 的图标，原始 iPad（和 iPad 2，作为屏幕分辨率没有什么不同）需要一个 72x72px 的图标，而原始 iPhone 不需要尺寸规格，但供您参考它是 57x57px。
解决方案3
13 2015-06-24 10:58:22
由于其中一些答案已经过时，我建议使用http://realfavicongenerator.net/生成所有图像和标记 - 每次使用它时我都会捐赠几欧元，希望它能让他们保持目前在 iOS、Android 和 Windows 上有效的内容是最新的，所以我不必这样做。
解决方案4
7 2018-01-07 16:43:47
As of 2018, Apple Developers Website recommends 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.启动图像是应用程序启动时将显示的内容。
解决方案5
6
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.您可能希望用户能够将您的 Web 应用程序或网页链接添加到主屏幕。 These links, represented by an icon, are called Web Clips.这些由图标表示的链接称为 Web Clips。 Follow these simple steps to specify an icon to represent your web application or webpage on iOS.按照这些简单的步骤指定一个图标来代表您在 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.在上面的示例中，将 custom_icon.png 替换为您的图标文件名。 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:要为不同的设备分辨率指定多个图标——例如，同时支持 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.如果没有设置尺寸属性，元素的尺寸默认为 60 x 60。如果没有与设备推荐尺寸匹配的图标，则使用大于推荐尺寸的最小图标。 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.如果没有使用链接元素指定图标，则会在网站根目录中搜索带有 apple-touch-icon... 前缀的图标。 For example, if the appropriate icon size for the device is 60 x 60, the system searches for filenames in the following order:例如，如果设备的适当图标大小为 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.注意：iOS 7 上的 Safari 不会为图标添加效果。 Older versions of Safari will not add effects for icon files named with the -precomposed.png suffix.旧版本的 Safari 不会为以 -precomposed.png 后缀命名的图标文件添加效果。 See First Steps: Identifying Your App in iTunes Connect for details.有关详细信息，请参阅第一步：在 iTunes Connect 中识别您的应用程序。
Source: Apple touch icon specs来源： Apple 触摸图标规格
解决方案6
2 2014-05-20 10:55:45
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
解决方案7
2 2014-10-14 10:26:07
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">
解决方案8
0 2018-06-14 06:24:41
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.