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

เมื่อผู้ใช้ iOS Safari เพิ่ม Progressive Web App (PWA) ลงในหน้าจอหลัก ไอคอนที่ปรากฏขึ้นจะเรียกว่าไอคอนสัมผัสของ Apple คุณระบุไอคอนที่แอปควรใช้ได้โดยใส่แท็ก <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 พิกเซล
  • เส้นทางที่ระบุไปยังไอคอนถูกต้อง
  • พื้นหลังของไอคอนไม่โปร่งใส

แหล่งข้อมูล