לא מכיל apple-touch-icon תקין

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

איך הביקורת של סמל המגע של אפל ב-Lighthouse נכשלת

‫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 פיקסלים
  • הנתיב שצוין לסמל הוא נתיב תקין
  • הר רקע של הסמל לא שקוף

משאבים