HTML apple-touch-icon 標籤設定


配置 Apple iOS 網頁圖示 apple-touch-icon 標籤設定,由圖示表示的連結稱為 Web Clip。只需簡單步驟指定來表示 iOS 上的網頁圖示,用於在添加到 iOS 的主螢幕時表示。如果沒設定 apple-touch-icon 設備會採用 screenshot 畫面補捉建立一個圖示。這些都是可選設置,添加到網頁 HTML 內容時會被其他平台忽略。

將整個網站(網站上的每個頁面)統一指定相同圖示,可將 PNG 格式的圖示檔例如 apple-touch-icon.png 放在網站 Root folder 根目錄中的資料夾,再將 link 連結元素添加到每個網頁中。

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

若特定單個網頁指定圖示,於 link 連結元素添加到各別網頁中,再依指定更改 custom_icon.png 為該頁圖示檔名稱。

https://developer.apple.com/library/.../ConfiguringWebApplications.html


不同的設備解析度

為不同的設備解析度指定多個圖示。例如同時支援 iPhone 和 iPad 設備。向每個 link 鏈接元素添加一個 sizes 屬性。

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

網頁圖示 apple-touch-icon 標籤、如果沒有與設備的推薦大小匹配的圖示,則使用大於推薦大小的最小圖示。如果沒有大於推薦大小的圖示,則使用最大的圖示。如果未使用 link 連結元素指定圖示,而網站根目錄被搜索帶有 apple-touch-icon 前綴的圖示,如果設備的相應圖示大小為 58 x 58,系統將按以下順序搜尋檔名。

apple-touch-icon-80x80.png apple-touch-icon.png




App Icon Sizes 應用圖示大小

安裝應用時,每個應用都必須提供小圖示,以便在主屏幕和整個系統上顯示,以及一個較大的圖示,以便在 App Store 中顯示。

Device 設備Icon size
iPhone60x60 pt (180x180 px @3x)
60x60 pt (120x120 px @2x)
iPad Pro83.5x83.5 pt (167x167 px @2x)
iPad, iPad mini76x76 pt (152x152 px @2x)
App Store1024x1024 pt (1024x1024 px @1x)

👎 而早期的 apple-touch-icon-precomposed 已經從 iOS 7 被廢棄。