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

แหล่งข้อมูล