未提供有效的 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 替換為圖示的實際路徑。

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

  • 圖示的大小為 180x180 像素或 192x192 像素
  • 指定的圖示路徑有效
  • 圖示的背景並非透明

資源