未提供有效的 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 觸控圖示

  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 像素
  • 指定圖示路徑有效
  • 圖示背景不透明

資源