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 |
---|---|
iPhone | 60x60 pt (180x180 px @3x) |
60x60 pt (120x120 px @2x) | |
iPad Pro | 83.5x83.5 pt (167x167 px @2x) |
iPad, iPad mini | 76x76 pt (152x152 px @2x) |
App Store | 1024x1024 pt (1024x1024 px @1x) |
👎 而早期的 apple-touch-icon-precomposed 已經從 iOS 7 被廢棄。