iOS Safari 使用者將漸進式網頁應用程式 (PWA) 新增至主畫面時,該圖示會顯示為「Apple 觸控圖示」。
只要在網頁的 <head>
中加入 <link rel="apple-touch-icon" href="/example.png">
標記,即可指定應用程式應使用的圖示。如果您的頁面沒有這個連結標記,iOS 會擷取網頁內容的螢幕截圖並產生圖示。換句話說,指示 iOS 下載圖示可帶來更優質的使用者體驗。
Lighthouse Apple 觸控圖示稽核失敗情形
Lighthouse 會標記 <head>
中沒有 <link rel="apple-touch-icon" href="/example.png">
標記的網頁:
Lighthouse 不會檢查圖示是否確實存在,或圖示大小是否正確。
如何新增 Apple Touch 圖示
將
<link rel="apple-touch-icon" href="/example.png">
加到網頁的<head>
中:<!DOCTYPE html> <html lang="en"> <head> … <link rel="apple-touch-icon" href="/example.png"> … </head> …
請將
/example.png
替換成圖示的實際路徑。
為提供良好的使用者體驗,請確認下列事項:
- 圖示大小為 180 x 180 像素或 192 x 192 像素
- 指定的圖示路徑有效
- 圖示的背景不透明