ไม่ได้ให้ apple-touch-icon ที่ถูกต้อง

เมื่อผู้ใช้ iOS Safari เพิ่ม Progressive Web App (PWA) ลงใน หน้าจอหลัก ไอคอนที่ปรากฏจะเรียกว่า Apple Touch Icon คุณระบุไอคอนที่แอปควรใช้ได้โดยใส่แท็ก <link rel="apple-touch-icon" href="/example.png"> ใน <head> ของหน้าเว็บ หากหน้าเว็บไม่มีแท็กลิงก์นี้ iOS จะสร้างไอคอนโดยการจับภาพหน้าจอของเนื้อหาในหน้าเว็บ กล่าวคือ การสั่งให้ iOS ดาวน์โหลดไอคอนจะส่งผลให้ประสบการณ์ของผู้ใช้ดูดีขึ้น

สาเหตุที่การตรวจสอบไอคอนสัมผัสของ Apple ใน Lighthouse ไม่สำเร็จ

Lighthouse จะแจ้งหน้าเว็บที่ไม่มีแท็ก <link rel="apple-touch-icon" href="/example.png"> ใน <head>

ไม่ได้ให้ 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 พิกเซล
  • เส้นทางที่ระบุไปยังไอคอนถูกต้อง
  • พื้นหลังของไอคอนไม่โปร่งใส

แหล่งข้อมูล