मान्य Apple-टच-आइकॉन उपलब्ध नहीं कराता

जब iOS Safari के उपयोगकर्ता अपनी होम स्क्रीन पर प्रोग्रेसिव वेब ऐप्लिकेशन (PWA) जोड़ते हैं, तो दिखने वाले आइकॉन को Apple टच आइकॉन कहा जाता है. अपने पेज के <head> में <link rel="apple-touch-icon" href="/example.png"> टैग शामिल करके, यह तय किया जा सकता है कि आपके ऐप्लिकेशन में किस आइकॉन का इस्तेमाल किया जाना चाहिए. अगर आपके पेज में यह लिंक टैग नहीं है, तो iOS पेज के कॉन्टेंट का स्क्रीनशॉट लेकर आइकॉन जनरेट करता है. दूसरे शब्दों में, iOS को आइकॉन डाउनलोड करने का निर्देश देने से, उपयोगकर्ता को बेहतर अनुभव मिलता है.

Lighthouse के Apple टच आइकॉन की जांच में गड़बड़ी कैसे होती है

Lighthouse, <head> में <link rel="apple-touch-icon" href="/example.png"> टैग के बिना पेजों को फ़्लैग करता है:

मान्य apple-touch-icon नहीं दिया गया है

Lighthouse यह जांच नहीं करता कि आइकॉन मौजूद है या नहीं या उसका साइज़ सही है या नहीं.

Apple टच आइकॉन जोड़ने का तरीका

  1. अपने पेज के <head> में <link rel="apple-touch-icon" href="/example.png"> जोड़ें:

    <!DOCTYPE html>
<html lang="en">
  <head>
    …
    <link rel="apple-touch-icon" href="/example.png">
    …
  </head>
  …

  2. /example.png को अपने आइकॉन के असल पाथ से बदलें.

उपयोगकर्ता को अच्छा अनुभव देने के लिए, पक्का करें कि:

  • आइकॉन का साइज़ 180x180 या 192x192 पिक्सल हो
  • आइकॉन का दिया गया पाथ मान्य हो
  • आइकॉन का बैकग्राउंड पारदर्शी नहीं है

संसाधन