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

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

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

מגדלור סימון דפים ללא <link rel="apple-touch-icon" href="/example.png"> ב-<head>:

הוא לא מספק סמל מגע חוקי של אפל

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

משאבים