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

जब iOS Safari के उपयोगकर्ता, प्रोग्रेसिव वेब ऐप्लिकेशन (PWA) को अपनी होम स्क्रीन पर जोड़ते हैं, तो दिखने वाले आइकॉन को ऐपल टच आइकॉन कहा जाता है. अपने पेज के <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 पिक्सल हो
  • आइकॉन के लिए दिया गया पाथ मान्य है
  • आइकॉन का बैकग्राउंड पारदर्शी नहीं है

संसाधन