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

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

วิธีที่การตรวจสอบไอคอนแบบสัมผัสของ Lighthouse ของ Apple ล้มเหลว

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

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

แหล่งข้อมูล