网站的 Apple Touch 图标

Posted

技术标签:

【中文标题】网站的 Apple Touch 图标【英文标题】：Apple Touch icon for websites 【发布时间】：2011-02-24 21:36:28 【问题描述】：

到目前为止，我一直在脑海中包含 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 的指南，现在需要三张图片。

那么如何将这些插入到代码的头部？

【问题讨论】：

【参考方案1】：

极简主义解决方案 - 推荐

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

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

详尽的解决方案 - 不推荐

Apple specs 为 iOS7 指定新尺寸：

60x60 76x76 120x120 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 没有在 html 代码中找到有趣的内容（有点像 IE 对 /favicon.ico 所做的事情），iOS 会查找类似 @​​987654329@ 的 URL。所以保持文件名在上面很重要。同样重要的是要考虑android/Chrome is also using these pictures。

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

【讨论】：

如果每个&lt;link&gt;标签中的文件不在客户端的缓存中，是否都下载了？无论请求页面的位置如何（手机、平板电脑、PC、Windows、Android...）？我有点担心性能影响... 从 iOS8 开始，还有新的 180x180 分辨率。您也不必真的从 HTML 链接到图标 - 除非您只需要一个特定页面的特定图标。苹果最近有他们喜欢的尺寸列表：developer.apple.com/library/ios/documentation/UserExperience/…。在表格中查找条目“Web 剪辑图标”。 在每个页面的标题中添加这么多数据对我来说似乎没有必要 - 如果图标在 180x180 版本中不是很大（我的通常在 2kb 和 5kb 之间），那么只需 &lt;link rel="apple-touch-icon" href="/apple-touch-icon.png" type="image/png" /&gt; 就足够了.即使您创建不同尺寸的图片，据我所知，您可以删除所有 apple-touch-icon 链接，iOS 会自行查找文件，从首选尺寸开始（如 apple-touch-icon-180x180. png) 并在没有找到其他文件时使用 apple-touch-icon.png。 @iquito 没错，你完全可以只使用一个声明。作为 RealFaviconGenerator 的创始人，我正在研究这个一刀切的解决方案。有一个可能的问题，尽管 iOS 做得很好：iOS 使用类似于 Mitchell 的算法来缩小图标。根据您的具体设计，这可能不是您想要的。一旦我对此有更多反馈，我会更新我的答案。 顺便说一句，RealFaviconGenerator 真的很棒，唯一我认为可以更好的是许多并非绝对必要的标题链接 - 无论是在生成新的图标和检查网站的运行情况时。也许作为进一步的改进，该网站可以显示不同的可能性-哪些部分是严格有益的（以及它们的作用/更多解释），哪些部分可以省略并且通常由浏览器自动检测（据我所知 iOS如果页面没有关于apple-touch-icon的任何信息，也会在根目录中查找具体大小。【参考方案2】：

给你，希望对你有帮助。

如果您希望 Apple 为您做一些美学设计（添加光泽），那么您可以将这些添加到 &lt;head&gt; 标签中：

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

【讨论】：

为什么precomposed意味着没有光泽？我不能用“没有光泽”来定义预先组合的笑话。不，我不是在讽刺，我真的很想知道。 @Mark0978 我读它的意思是：“它已经组成，即“iOS 风格”（由你），所以 iOS 不会弄乱它（除了圆角）” 这在 iOS 7 中已经过时了。 是否可以只拥有一张图片并让 Apple 自动调整其大小？【参考方案3】：

由于其中一些答案已经过时，我建议使用 http://realfavicongenerator.net/ 生成所有图像和标记 - 我每次使用它时都会捐赠几欧元，希望它能让他们跟上关于当前在 iOS、Android 和 Windows 上有效的日期，所以我不必这样做。

【讨论】：

（我刚刚注意到这里的其他答案之一来自 realfavicongenerator.net 的作者 - 请为他的答案而不是我的答案投票！） 支持这个开发者，因为这个网站是完美的 Tim + @whiteshooz：感谢您的支持！ （是的，我刚才注意到你的 cmets）【参考方案4】：

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

应用标题将替换您的网站标题。通常，你会想要那个。 启动图像是应用程序启动时出现的图像。

【讨论】：

【参考方案5】：

为 Web Clip 指定网页图标

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

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

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

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

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

<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。 如果没有与设备推荐尺寸匹配的图标，则使用大于推荐尺寸的最小图标。如果没有大于推荐大小的图标，则使用最大的图标。

如果没有使用链接元素指定图标，则会在网站根目录中搜索带有 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

【讨论】：

嗨，你知道我可以从哪里下载这些图标 png 图像吗？【参考方案6】：

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

【讨论】：

【参考方案7】：

我必须承认，我从未阅读过任何苹果规格，但根据我网站上的日志，这些图像是根目录所必需的：

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

【讨论】：

【参考方案8】：

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

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

此标签返回 iOS 设备的下一张图片：

【讨论】：

OMG-IMG 社区community.icons8.com/t/faq-omg-img-for-true-developers/56

以上是关于网站的 Apple Touch 图标的主要内容，如果未能解决你的问题，请参考以下文章

Weebly 上的 Apple Touch 图标

HTML - 图标和 apple-touch-icon 中的可访问性

iOS 书签显示 favicon 而不是 apple-touch-icon

通过 htaccess 密码保护识别“apple-touch-icon”

移动网站图标

无法在带有 nuxt.js 应用程序的书签中显示 apple-touch-icon