正確的iOS Web剪輯集成（Web應用程序圖標）

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制作網絡應用程序圖標的絕對正確方法是什么？

Answer 1

根據文檔 ，

要為不同的設備分辨率指定多個圖標（例如，同時支持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。

所以從技術上講，你的新方法應該沒問題。 請注意，文檔列出了iOS 7的大小。如果您具有所有正確的大小，則將專門使用它們。

如果你沒有所有正確的尺寸，

使用大於建議大小的最小圖標。 如果沒有大於推薦尺寸的圖標，則使用最大的圖標。

這意味着您可以只包含iOS 7尺寸。 我認為沒有任何理由去添加或刪除舊圖標。 但如果質量要求，請為所有版本的iOS包含正確的尺寸。

如果沒有使用html中的鏈接元素指定圖標

在網站根目錄中搜索帶有apple-touch-icon ...前綴的圖標。 例如，如果設備的相應圖標大小為60 x 60，系統將按以下順序搜索文件名：

蘋果觸摸圖標76x76.png

蘋果觸摸的icon.png

因此，只要您正確命名文件並將它們放在根目錄中，您實際上就不必使用鏈接元素。

這是Apple關於為Web Clip指定網頁圖標的文檔的鏈接