Favicon और PWA एसेट चेकलिस्ट 2025 — मैनिफेस्ट, आइकन और SEO संकेत

प्रकाशित: 18 सित॰ 2025 · पढ़ने का समय: 1 मि. · Unified Image Tools संपादकीय

कई साइटों पर आज भी मैनिफेस्ट/आइकनों की कमी दिखती है। चार आम गलतियाँ: आकारों की कमी, लोकल‑वार मैनिफेस्ट संदर्भ में गड़बड़ी, theme‑color में असंगति, और PWA व favicon के पथों का मिश्रण। चूक कम करने के लिए इस क्रम में जाँचें।

1) न्यूनतम आइकन सेट

• 16px/32px: ब्राउज़र टैब/बुकमार्क (ICO स्वीकार्य)
• 192/512: PWA इंस्टॉल (PNG अनुशंसित)
• Safari pinned tab के लिए एकरंगी SVG दें
• पारदर्शिता/मार्जिन को डार्क/लाइट थीम में वास्तविक डिवाइस पर देखें

2) लोकल‑वार मैनिफेस्ट लोकलाइज़ेशन

• हर locale (जैसे /hi/manifest.webmanifest) में name/short_name/description का अनुवाद करें
• जाँचें कि start_url और scope locale रूट पर हैं ( /hi पर /en नहीं)
• HTML लेआउट में लिंक करें: <link rel="manifest" href="/hi/manifest.webmanifest">

3) थीम‑कलर और स्थिरता

• मैनिफेस्ट की theme_color और HTML की <meta name="theme-color"> मिलानी चाहिए
• डार्क/लाइट में दृश्यता जाँचें (आइकन बैकग्राउंड में न घुले)
• apple-touch-icon कम से कम 180px दें; कोनों का घुमाव जाँचें

4) SEO संकेत और HTTP वायरिंग

• 404 आइकन पाथ न हों (Dev/Prod पाथ भिन्न हो सकते हैं)
• robots.txt में आइकन/मैनिफेस्ट ब्लॉक न हों
• सही Content-Type: application/manifest+json

टूल्स से स्वचालन

• आइकन जनरेशन: फेविकॉन जेनरेटर
  • स्रोत लोगो से 16/32/192/512; मार्जिन प्रीव्यू सहित
• लोकल‑वार मैनिफेस्ट असेंबली: फेविकॉन + मैनिफेस्ट पैक
  • name/short_name भरता है व start_url/scope जाँचता है

ऑपरेशन में आम pitfalls

• सिर्फ रूट manifest.webmanifest संदर्भित → लोकलाइज़ेशन निष्प्रभावी
• SPA में start_url 200 होते हुए भी Service Worker scope से बाहर
• अलग‑अलग ओरिजिन (staging/prod): सापेक्ष OGP → 404 (sitemap भी जाँचें)

5) प्रोड से पहले वैलिडेशन फ्लो

1. आर्टिफैक्ट सूची देखें (/icons/ और प्रत्येक locale का manifest.webmanifest)
2. Lighthouse से PWA/Best Practices (कमियाँ/गलत संदर्भ पकड़ें)
3. iOS/Safari पर “होम स्क्रीन में जोड़ें” की जाँच (apple-touch-icon के कोने/मार्जिन)
4. Android/Chrome पर इंस्टॉल व्यवहार (splash बैकग्राउंड रंग/नाम)
5. DevTools Network में 404/Content‑Type सत्यापित करें

6) सर्विस वर्कर और कैश

• प्रोड में सक्षम, विकास में निष्क्रिय/अनरजिस्टर रखना सुरक्षित
• skipWaiting नीति टीम‑स्तर पर एक‑सी रखें (मैन्युअल बनाम प्रॉम्प्ट)
• पुराने कैश की सफाई (नामकरण/वर्ज़निंग) डॉक्युमेंट करें

टिप्पणी: विकास में इस साइट पर मौजूदा SW स्वचालित रूप से अनरजिस्टर होता है। संचालन में “अपडेट प्रॉम्प्ट → उपयोगकर्ता सहमति” कम जोखिम वाला पैटर्न है।

7) मॉनिटरिंग और रिग्रेशन टेस्ट

• CI में जेनरेटेड फाइलों का अस्तित्व/हैश (मिसिंग/पुराने संदर्भ) जाँचें
• मैनिफेस्ट फ़ील्ड डिफ्फ प्रत्येक locale पर तुलना करें (name/short_name/description/start_url/scope)
• robots/sitemap द्वारा ब्लॉक/छूट की निगरानी (Search Console/Lighthouse)

8) अक्सर पूछे जाने वाले प्रश्न (FAQ)

• प्र. 16/32/192/512 के अलावा आकार चाहिए?
  • उ. आवश्यक नहीं; Windows/पुराने Android पर 48/96/144 काम आ सकते हैं। पहले न्यूनतम सेट, फिर ज़रूरत अनुसार विस्तार।
• प्र. SVG favicon?
  • उ. समर्थन बढ़ रहा है; बैकवर्ड संगतता हेतु PNG/ICO रखें। Safari pinned tab के लिए अलग monochrome SVG।
• प्र. मैनिफेस्ट का लोकलाइज़ेशन UI टेक्स्ट जैसा?
  • उ. हाँ, पर name/short_name की लंबाई सीमाएँ प्लेटफ़ॉर्म‑वार बदलती हैं; संक्षेप नीति तय करें।

9) व्यावहारिक वर्कफ़्लो (E2E)

1. स्रोत लोगो गाइडलाइन तय करें (मार्जिन, न्यूनतम आकार, डार्क/लाइट)
2. फेविकॉन जेनरेटर से 16/32/192/512 जनरेट करें
3. फेविकॉन + मैनिफेस्ट पैक से locale‑वार मैनिफेस्ट बनाएँ
4. लेआउट में <link rel="icon"> और <link rel="manifest"> को locale‑वार संदर्भित करें
5. डार्क/लाइट में दृश्यता UI समीक्षा; ज़रूरत हो तो आइकन को outline दें
6. CI में फाइल अस्तित्व/Content‑Type/लिंक जाँचें; Lighthouse से PWA स्कोर
7. रिलीज़ के बाद Search Console और लॉग्स से रिग्रेशन निगरानी

इन चरणों को टेम्पलेट बनाकर PR में जोड़ें ताकि गुणवत्ता निर्भरता‑मुक्त रहे।