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

כשמשתמשי 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>:

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

משאבים