未提供有效的 Apple-touch-icon

如果 iOS Safari 使用者新增漸進式網頁應用程式 (PWA)， 主畫面顯示的圖示稱為 Apple Touch 圖示。 您可以加入 在您的 <head> 中的 <link rel="apple-touch-icon" href="/example.png"> 標記 頁面。如果您的網頁沒有這個連結代碼，iOS 會擷取 網頁內容也就是說，指示 iOS 下載圖示，結果更加精美 使用者體驗

Lighthouse Apple 觸控圖示稽核失敗情形

Lighthouse 標記沒有 <link rel="apple-touch-icon" href="/example.png"> 的網頁 <head> 中的標記：

未提供有效的 Apple-touch-圖示

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

如何新增 Apple 觸控圖示

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

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

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

，瞭解如何調查及移除這項存取權。

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

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

資源