html - 正确的 iOS 网络剪辑集成(网络应用程序图标)

Question

我决定为 iOS 更改我的网络应用程序图标。

这是我用来链接图标的方式:

<!-- iOS 7 iPad (retina) -->
<link href="/assets/img/misc/ios/apple-touch-icon-152x152-precomposed.png"
              sizes="152x152"
              rel="apple-touch-icon-precomposed">

<!-- iOS 6 iPad (retina) -->
<link href="/assets/img/misc/ios/apple-touch-icon-144x144-precomposed.png"
              sizes="144x144"
              rel="apple-touch-icon-precomposed">

<!-- iOS 7 iPhone (retina) -->
<link href="/assets/img/misc/ios/apple-touch-icon-120x120-precomposed.png"
              sizes="120x120"
              rel="apple-touch-icon-precomposed">

<!-- iOS 6 iPhone (retina) -->
<link href="/assets/img/misc/ios/apple-touch-icon-114x114-precomposed.png"
              sizes="114x114"
              rel="apple-touch-icon-precomposed">

<!-- iOS 7 iPad -->
<link href="/assets/img/misc/ios/apple-touch-icon-76x76-precomposed.png"
              sizes="76x76"
              rel="apple-touch-icon-precomposed">

<!-- iOS 6 iPad -->
<link href="/assets/img/misc/ios/apple-touch-icon-72x72-precomposed.png"
              sizes="72x72"
              rel="apple-touch-icon-precomposed">

<!-- iOS 6 iPhone -->
<link href="/assets/img/misc/ios/apple-touch-icon-57x57"
              sizes="57x57"
              rel="apple-touch-icon-precomposed">

这是我发现的新方法:

<link rel="apple-touch-icon" href="/assets/img/misc/ios/icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/assets/img/misc/ios/icon-72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/assets/img/misc/ios/icon@2x.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/assets/img/misc/ios/icon-72@2x.png" />

但是，当我在我的设备上测试时，新方法不起作用，所以我想知道为 IOS6 和 IOS7 显示 Web 应用程序图标的绝对正确方法是什么？

Answer 1

根据 documentation ,

To specify multiple icons for different device resolutions—for example, support both iPhone and iPad devices—add a sizes attribute to each link element as follows:

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

The icon that is the most appropriate size for the device is used. If no sizes attribute is set, the element’s size defaults to 60 x 60.

所以从技术上讲，您的新方法应该没问题。请注意，文档列出了适用于 iOS 7 的尺寸。如果您拥有所有正确的尺寸，它们将被专门使用。

如果您没有所有正确的尺寸，

the smallest icon larger than the recommended size is used. If there are no icons larger than the recommended size, the largest icon is used.

这意味着您可以只包含 iOS 7 尺寸。我看不出有任何理由要付出额外的努力来添加或删除旧图标。但如果质量需要，请包括适用于所有 iOS 版本的正确尺寸。

如果没有使用 html 中的链接元素指定图标

the website root directory is searched for icons with the apple-touch-icon... prefix. For example, if the appropriate icon size for the device is 60 x 60, the system searches for filenames in the following order:

apple-touch-icon-76x76.png

apple-touch-icon.png

所以您实际上不必使用链接元素，只要您正确命名文件并将它们放在根目录中即可。

这是 Apple 关于 Specifying a Webpage Icon for Web Clip 的文档的链接