未提供有效的 Apple-touch-icon

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"> 標記的網頁：

未提供有效的 apple-Touch-icon

Lighthouse 不會檢查圖示是否確實存在，或圖示大小是否正確。

如何新增 Apple Touch 圖示

  1. 將 <link rel="apple-touch-icon" href="/example.png"> 加到網頁的 <head> 中：

    <!DOCTYPE html>
<html lang="en">
  <head>
    …
    <link rel="apple-touch-icon" href="/example.png">
    …
  </head>
  …

  2. 請將 /example.png 替換成圖示的實際路徑。

為提供良好的使用者體驗，請確認下列事項：

  • 圖示大小為 180 x 180 像素或 192 x 192 像素
  • 指定的圖示路徑有效
  • 圖示的背景不透明

資源