apple-touch-icon معتبر ارائه نمی‌دهد

مراجعه کنید.

وقتی کاربران iOS Safari برنامه‌های وب پیش‌رو (PWA) را به صفحه اصلی‌شان اضافه می‌کنند، نمادی که ظاهر می‌شود نماد لمسی Apple نام دارد. با گنجاندن برچسب <link rel="apple-touch-icon" href="/example.png"> در <head> صفحه‌تان می‌توانید مشخص کنید برنامه‌تان از چه نمادی استفاده کند. اگر صفحه‌تان این برچسب پیوند را نداشته باشد، iOS با گرفتن نماگرفت از محتوای صفحه، نمادی تولید می‌کند. به عبارت دیگر، دستور دادن به iOS برای بارگیری نماد منجر به تجربه کاربری بهتری می‌شود.

چگونه ممیزی نماد لمسی Lighthouse Apple ناموفق می‌شود

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 را با مسیر واقعی نمادتان جایگزین کنید.

برای ارائه تجربه کاربری خوب، مطمئن شوید که:

  • نماد ۱۸۰×۱۸۰ پیکسل یا ۱۹۲×۱۹۲ پیکسل است
  • مسیر مشخص‌شده به نماد معتبر است
  • پس‌زمینه نماد شفاف نیست

منابع