כשמשתמשי iOS Safari מוסיפים Progressive Web Apps (PWA) למסכי הבית שלהם, הסמל שמופיע נקרא סמל המגע של Apple.
כדי לציין באיזה סמל האפליקציה צריכה להשתמש, אפשר לכלול את התג <link rel="apple-touch-icon" href="/example.png">
ב-<head>
של הדף. אם אין בדף את תג הקישור הזה, מערכת iOS יוצרת סמל על ידי צילום מסך של תוכן הדף. במילים אחרות, מתן הוראה ל-iOS להוריד סמל יוצר חוויית משתמש מלוטשת יותר.
איך הבדיקה של סמל המגע של Apple ב-Lighthouse נכשלה
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 פיקסלים
- הנתיב שצוין לסמל חוקי
- רקע הסמל לא שקוף