网站的Apple Touch图标

Answers:

88

极简解决方案-推荐

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

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

详尽的解决方案-不推荐

Apple规格为iOS7指定了新尺寸：

  • 60x60
  • 76x76
  • 120x120
  • 152x152

而且也适用于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">

另外，您应该创建一个180x180的图片，命名为apple-touch-icon.png。

请注意/apple-touch-icon-76x76.png，如果iOS在HTML代码中找不到有趣的内容（有点像IE所做的工作/favicon.ico），则会查找类似的URL 。因此，保持文件名在上方非常重要。同样重要的是要考虑到Android / Chrome也正在使用这些图片。

您可能想知道，这个图标生成器可以一次创建所有这些图片。完全披露：我是该网站的作者。

— philippe_b
source
2
<link>如果每个标记中的所有文件不在客户端的缓存中，是否会下载？无论在何处请求页面（电话，平板电脑，PC，Windows，Android ...）？我有点担心性能的影响……
— RayOnAir 2014年
1
从iOS8开始，还有新的180x180分辨率。您实际上也不必从HTML链接到图标-除非您只想为一个特定页面提供特定图标。Apple最近提供了他们喜欢的尺寸的列表：developer.apple.com/library/ios/documentation/UserExperience/…。在表中查找条目“ Web剪辑图标”。
— qingu 2014年
1
对我来说，在每页的页眉中添加这么多的数据似乎对我来说是不必要的-如果图标在180x180版本中不是很大（我的图标通常在2kb和5kb之间），则仅具有<link rel="apple-touch-icon" href="https://stackoverflow.com/apple-touch-icon.png" type="image/png" />足够的内容。即使您创建了不同大小的图片，据我所知，您只需删除所有apple-touch-icon链接，iOS就会从文件的首选大小开始查找文件本身（例如apple-touch-icon-180x180）。 png），如果找不到其他文件，则使用apple-touch-icon.png。
— iquito '16
1
@iquito是的，您完全可以只使用一个声明。作为RealFaviconGenerator的创始人，我正在研究一种“一刀切”的解决方案。尽管iOS表现出色，但仍有可能出现问题：iOS使用类似于Mitchell的算法来缩小图标。根据您的特定设计，可能不是您想要的。一旦对此有更多反馈，我将更新我的答案。
— philippe_b
2
顺便说一句，RealFaviconGenerator确实很棒，我认为唯一可以做的更好的事情是，许多头链接并不是严格必要的-既生成新的图标，又检查网站的运行情况。也许作为进一步的改进，网站可以显示不同的可能性-哪些部分是严格有益的（以及它们的作用/更多解释），哪些部分可以被忽略，通常由浏览器自动检测（据我所知，iOS如果页面上没有任何信息，还会在根目录中查找特定大小apple-touch-icon。
— iquito '16
70

到这里，希望对您有所帮助。

如果您想让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。

— 查尔斯·库克
source
为什么预先混合意味着没有光泽？我无法用“无光泽”来定义预先合成的jibe。不，我真的很想讽刺。
— boatcoder 2013年
@ Mark0978我读过它的意思是：“它已经组成，例如，“ iOS风格”（由您自己使用），因此iOS不会弄乱它（除了拐角处）”
— Michael Haren 2013年
5
这是过时，因为iOS的7
— bjb568
是否可以只拥有一张图像，然后让Apple在其末端自动调整其大小？
— 亚伦·弗兰克
12

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

— 蒂姆·艾尔斯（Tim Iles）
source
3
（我刚刚注意到，这里的其他答案之一是来自realfavicongenerator.net的作者-请提升他的答案，而不是我的答案！）
— Tim Iles
3
支持此开发人员，因为此站点非常完美
— whiteshooz 2015年
Tim + @whiteshooz：谢谢您的支持！（是的，我刚才注意到您的评论）
— philippe_b
7

截至2018年，Apple Developers网站为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">

应用标题将替换您的网站标题。通常，您会想要那样。应用启动时将显示启动图像。

— 佩德罗·法拉利
source
6

指定Web剪辑的网页图标

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

要为整个网站（网站上的每个页面）指定一个图标，请将PNG格式的图标文件放在名为apple-touch-icon.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 x60。如果没有与设备的建议大小匹配的图标，则使用大于建议大小的最小图标。如果没有大于建议大小的图标，则使用最大的图标。

如果未使用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图标规格

嗨，您知道我可以从哪里下载这些图标png图像吗？
— BKSpurgeon
2

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

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
— TomášZato-恢复莫妮卡
source
2

从我的请求到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">
— 皮纳尔
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.