เมื่อผู้ใช้ 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>
ดังนี้
Lighthouse ไม่ได้ตรวจสอบว่ามีไอคอนดังกล่าวอยู่จริงหรือไม่ หรือไอคอนมีขนาดที่ถูกต้องหรือไม่
วิธีเพิ่มไอคอน Apple Touch
เพิ่ม
<link rel="apple-touch-icon" href="/example.png">
ไปยัง<head>
ของเพจ:<!DOCTYPE html> <html lang="en"> <head> … <link rel="apple-touch-icon" href="/example.png"> … </head> …
ให้แทนที่
/example.png
ด้วยเส้นทางจริงไปยังไอคอน
เพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดี โปรดตรวจสอบสิ่งต่อไปนี้
- ไอคอนมีขนาด 180x180 พิกเซล หรือ 192x192 พิกเซล
- เส้นทางที่ระบุไปยังไอคอนถูกต้อง
- พื้นหลังของไอคอนไม่โปร่งใส