Html 用于网站的Apple Touch图标

到目前为止，我的脑海中一直有一行苹果触摸图标，如下所示：

然而，在一份公认的答复中指出，根据苹果的指导方针，现在需要三张图片

---

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

给你，希望这对你有所帮助

如果你想让苹果为你做一些美观的事情（添加光泽），那么你可以在

标签中添加以下内容：

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

极简主义解决方案-推荐

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

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

详尽的解决方案-不建议使用

为iOS7指定新的大小：

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

:

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

另外,

请注意，如果iOS在HTML代码中找不到有趣的内容（有点像IE使用的

/favicon.ico

），它会查找类似于

/apple-touch-icon-76x76.png

的URL。因此，保持文件名在上面是很重要的。同样重要的是要考虑这一点。

---

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

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

从我的拉入请求到（带有iPhone 6图标）：

---

为网页剪辑指定网页图标

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

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

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

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

有关网页图标度量，请参见图标和图像大小

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

---

来源：

由于其中一些答案已经过时，我建议使用它来生成所有图像和标记-我每次使用它时都会捐赠几欧元，希望它能让他们了解iOS、Android和Windows上当前有效的内容，所以我不必这样做。

从2018年起，对于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">

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

您可以使用它生成图标的所有大小和颜色。 例如：

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

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

---

为什么预合成意味着没有光泽？我不能用“没有光泽”来定义预合成的讽刺。不，我不是在挖苦人，我真的想知道。@Mark0978我读它的意思是：“它已经编写好了，即“iOS风格”（由你编写），所以iOS不会弄乱它（除了拐弯）从iOS 7开始，这已经过时了。是否可以只拥有一个图像，让苹果自动调整其末端的大小？如果每个

标签中的所有文件不在客户端缓存中，是否都已下载？无论请求页面的位置如何（手机、平板电脑、pc、windows、android？我有点担心性能问题……从iOS8开始，还有新的180x180分辨率。你也不需要从HTML链接到图标，除非你只需要一个特定页面的特定图标。苹果最近列出了他们喜欢的尺码：。查找表中的条目“Web剪辑图标”。在每个页面的标题中添加如此多的数据对我来说似乎没有必要-如果180x180版本中的图标不是很大（我的图标通常在2kb和5kb之间），那么只要有

就足够了。即使您创建不同大小的图片，据我所知，您只需删除所有apple touch图标链接，iOS将查找文件本身，从首选大小（如apple-touch-icon-180x180.png）开始，如果找不到其他文件，则使用apple-touch-icon.png。@iquito是的，您完全可以使用一个声明。作为RealFaviconGenerator的创始人，我正在研究这个一刀切的解决方案。虽然iOS做得很好，但也有一个可能的陷阱：iOS使用类似于Mitchell的算法来缩小图标。根据您的具体设计，这可能不是您想要的。一旦我有更多的反馈，我会更新我的答案。顺便说一下，RealFaviconGenerator真的很棒，我唯一能做的就是

apple-touch-icon-76x76.png

apple-touch-icon.png

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

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