Question

到目前为止，我一直在脑海中包含Apple Touch图标的行：

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

然而，在the Q&A "What are the correct pixel dimensions for an apple-touch-icon?"中，在接受的答案中声明，根据Apple的指导原则，现在需要三张图片。

那么如何将这些插入到代码的head部分呢？

Answer 1

你走了，希望这有帮助。

如果您希望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。

Answer 2

极简主义解决方案 - 推荐

通常的做法是创建一个180x180图标，这是最高的预期分辨率，并让iOS设备根据需要缩小它。它声明为：

<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">

详尽的解决方案 - 不推荐

Apple specs为iOS7指定新尺寸：

60×60
76x76
120×120
152x152

And also for iOS8：

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">

此外，you should create a 180x180 picture named apple-touch-icon.png。

请注意，iOS会查找类似/apple-touch-icon-76x76.png的网址，如果它在HTML代码中找不到有趣的内容（有点像IE正在使用/favicon.ico）。因此，保持文件名是否重要是很重要的。考虑Android/Chrome is also using these pictures。

也很重要

您可能想知道此favicon generator可以一次创建所有这些图片。完全披露：我是这个网站的作者。

Answer 3

由于其中一些答案已经过时，我建议使用http://realfavicongenerator.net/生成所有图像和标记 - 我每次使用它时都会捐出几欧元，希望它能让它们保持关于iOS，Android和Android目前有效的最新信息Windows，所以我不必。

Answer 4

指定网络剪辑的网页图标

您可能希望用户能够将您的Web应用程序或网页链接添加到主屏幕。这些链接以图标表示，称为Web Clips。按照以下简单步骤指定一个图标来表示iOS上的Web应用程序或网页。

要指定整个网站的图标（网站上的每个页面），请将PNG格式的图标文件放在名为apple-touch-icon.png的根文档文件夹中

要为单个网页指定图标或使用特定于网页的图标替换网站图标，请在网页中添加链接元素，如下所示：

<link rel="apple-touch-icon" href="/custom_icon.png">

在上面的示例中，将custom_icon.png替换为您的图标文件名。要为不同的设备分辨率指定多个图标（例如，同时支持iPhone和iPad设备），请为每个链接元素添加一个sizes属性，如下所示：

<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">

使用最适合设备大小的图标。如果未设置sizes属性，则元素的大小默认为60 x 60。如果没有与设备的建议大小匹配的图标，则使用大于建议大小的最小图标。如果没有大于推荐尺寸的图标，则使用最大的图标。

如果未使用link元素指定图标，则会在网站根目录中搜索带有apple-touch-icon ...前缀的图标。例如，如果设备的相应图标大小为60 x 60，系统将按以下顺序搜索文件名：

apple-touch-icon-76x76.png

apple-touch-icon.png

请参阅网页图标指标的图标和图片大小。

注意：iOS 7上的Safari不会为图标添加效果。较旧版本的Safari不会为使用-precomposed.png后缀命名的图标文件添加效果。有关详细信息，请参阅第一步：在iTunes Connect中识别您的应用程序。

来源：Apple touch icon specs

Answer 5

自2018年起，Apple Developers Website推荐以下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将取代您的网站标题。通常，你想要那样。启动图像是应用程序启动时显示的内容。

Answer 6

我必须承认，我从未读过任何苹果规格，但根据我网站上的日志，这些图片在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

Answer 7

从我的拉取请求到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">

Answer 8

您可以使用omg-img生成popular图标的所有尺寸和颜色。例如：

<link rel="apple-touch-icon" sizes="152x152" 
      href="https://img.icons8.com/color/152x152/anonymous-mask.png">

此标记返回iOS设备的下一个图像：

网站的Apple Touch图标

8 个答案: