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

כשמשתמשים ב-Safari ל-iOS מוסיפים אפליקציות מסוג Progressive Web App ‏ (PWAs) למסכי הבית שלהם, הסמל שמופיע נקרא סמל המגע של 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

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

משאבים