هنگامی که کاربران iOS Safari برنامه‌های وب پیشرفته (PWA) را به صفحه اصلی خود اضافه می‌کنند، نمادی که ظاهر می‌شود ، نماد لمسی اپل نامیده می‌شود. می‌توانید با قرار دادن برچسب <link rel="apple-touch-icon" href="/example.png"> در <head> صفحه خود، مشخص کنید که برنامه شما از چه نمادی استفاده کند. اگر صفحه شما این برچسب پیوند را ندارد، iOS با گرفتن اسکرین شات از محتوای صفحه یک نماد ایجاد می کند. به عبارت دیگر، آموزش به iOS برای دانلود آیکون منجر به تجربه کاربری بهتری می شود.
چگونه ممیزی نماد لمسی Lighthouse Apple شکست می خورد
فانوس دریایی صفحات را بدون برچسب <link rel="apple-touch-icon" href="/example.png"> در <head> پرچم گذاری می کند:
Lighthouse بررسی نمی کند که آیا نماد واقعاً وجود دارد یا اینکه آیا نماد اندازه صحیح است.
نحوه اضافه کردن آیکون لمسی اپل
<link rel="apple-touch-icon" href="/example.png">را به<head>صفحه خود اضافه کنید:<!DOCTYPE html> <html lang="en"> <head> … <link rel="apple-touch-icon" href="/example.png"> … </head> …/example.pngرا با مسیر واقعی نماد خود جایگزین کنید.
برای ارائه یک تجربه کاربری خوب، مطمئن شوید که:
- نماد 180x180 پیکسل یا 192x192 پیکسل است
- مسیر مشخص شده برای نماد معتبر است
- پس زمینه نماد شفاف نیست