it-swarm.dev

网站的Apple Touch图标

到目前为止,我一直在脑海中包含Apple Touch图标的行,如下所示:

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

但是,在 Q&A “Apple-touch-icon的正确像素尺寸是多少?” 在接受的答案中说明,根据Apple的指南,现在需要三张图片。

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

68
J82

你走了,希望这有帮助。

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

66
Charles Cooke

极简主义解决方案 - 推荐

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

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

详尽的解决方案 - Not推荐

Apple规格 指定iOS7的新尺寸:

  • 60X60
  • 76x76
  • 120×120
  • 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">

另外, 你应该创建一个名为Apple-touch-icon.png 的180x180图片。

请注意,如果在HTML代码中没有找到有趣的东西(有点像IE正在使用/Apple-touch-icon-76x76.png),iOS会查找类似/favicon.ico的URL。因此,保持文件名是否重要是很重要的。同样重要的是要考虑 Android/Chrome也在使用这些图片

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

63
philippe_b

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

8
Tim Iles

截至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将取代您的网站标题。通常,你想要那样。启动图像是应用程序启动时显示的图像。

5
Pedro Ferrari

为Web Clip指定网页图标

您可能希望用户能够将您的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.如果没有与设备的建议大小匹配的图标,则使用大于建议大小的最小图标。如果没有大于推荐尺寸的图标,则使用最大的图标。

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

5
user2719890

我必须承认,我从未读过任何Apple规范,但根据我网站上的日志,这些图片在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
2
Tomáš Zato

从我的pull-request到 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">
2
Pinal

您可以使用 omg-img 生成 popular icons的所有大小和颜色。例如:

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

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

enter image description here 

0
Horev Ivan