पहले एक फेविकॉन काफी था — अब नहीं
लंबे समय तक, वेबसाइट के रूट फोल्डर में सिर्फ एक favicon.ico डाल देना ही पूरा काम था। फोन, टैबलेट और प्रोग्रेसिव वेब ऐप्स आने के बाद यह बदल गया — ब्राउज़र टैब आइकन, iOS होम स्क्रीन बुकमार्क, और Android ऐप शॉर्टकट तीन अलग-अलग जगहें हैं, हर एक को अपने खास साइज़ की इमेज चाहिए, और अगर वेबसाइट इनमें से कोई भी मिस करती है तो या तो आपके लोगो का धुंधला, गलत साइज़ वाला वर्ज़न दिखता है, या कुछ सामान्य चीज़ दिखती है, जैसे आपका असली आइकन नहीं बल्कि पेज का स्क्रीनशॉट।
इसीलिए जिन वेबसाइट्स ने सिर्फ पुराना favicon.ico सेट किया होता है, वे खासकर मोबाइल पर हल्की टूटी हुई लगती हैं — डेस्कटॉप टैब ठीक दिखता है, लेकिन होम स्क्रीन बुकमार्क नहीं।
हर खास साइज़ असल में किस लिए है
16×16 और 32×32 PNG साइज़ अलग-अलग डिस्प्ले डेंसिटी पर ब्राउज़र टैब और बुकमार्क बार को कवर करते हैं। 180×180 apple-touch-icon खासतौर पर इसलिए है क्योंकि iOS होम स्क्रीन बुकमार्क के लिए favicon.ico का इस्तेमाल करता ही नहीं — बिना उसी साइज़ की यह असली फाइल के, iOS चुपचाप आपके पेज का स्क्रीनशॉट लेकर उसे बुकमार्क आइकन बना देता है, आपके लोगो की जगह, जो साफ तौर पर टूटा हुआ दिखता है। 192×192 और 512×512 साइज़ Android के Chrome और किसी भी प्रोग्रेसिव वेब ऐप इंस्टॉल प्रॉम्प्ट के लिए हैं, जिन्हें site.webmanifest फाइल के ज़रिए बताया जाता है कि किस साइज़ पर कौन-सा आइकन इस्तेमाल करना है।
इनमें से कोई भी साइज़ मनमाना नहीं है — हर एक किसी असली दुनिया की डिस्प्ले स्थिति से जुड़ा है, इसीलिए यह अंदाज़ा लगाने के बजाय कि आपको कौन-सा चाहिए होगा, पूरा सेट एक साथ बना लेना ज्यादा सुरक्षित है।
वह मैनिफेस्ट फाइल जिसे लोग असल में जांचना भूल जाते हैं
site.webmanifest फाइल को बस डालकर भूल जाने वाला ब्लैक बॉक्स समझना आसान है, लेकिन इसे बनाने के बाद असल में खोलकर देखना जरूरी है — इसमें आमतौर पर आपके ऐप के नाम, थीम कलर और बैकग्राउंड कलर के लिए प्लेसहोल्डर वैल्यू होती हैं, और अगर कोई विज़िटर आपकी वेबसाइट को होम स्क्रीन ऐप या PWA के रूप में इंस्टॉल करता है तो ये साफ दिखती हैं। किसी के होम स्क्रीन पर आपकी असली वेबसाइट के नाम की जगह एक सामान्य प्लेसहोल्डर नाम दिखना एक छोटी लेकिन ध्यान देने लायक चूक है, जिसे अगर याद रहे तो दो मिनट में ठीक किया जा सकता है।
ये फाइलें असल में कहाँ जाती हैं
फाइलें बनाना काम का सिर्फ आधा हिस्सा है — इन्हें सही तरीके से रेफर करना भी जरूरी है ताकि ये काम करें। ज्यादातर आपकी वेबसाइट के पब्लिक या रूट डायरेक्टरी में जाती हैं, आपके HTML के <head> में हर एक के लिए साफ <link> टैग के साथ (favicon.ico को अक्सर ब्राउज़र अपने आप पहचान लेते हैं अगर वह रूट में हो, लेकिन बाकी को आमतौर पर साफ टैग चाहिए)। लिंक टैग छोड़ देना एक आम वजह है जिससे नया बनाया गया आइकन सेट डिप्लॉय के बाद भी सही से नहीं दिखता — फाइलें मौजूद होती हैं, लेकिन पेज पर कुछ भी उन्हें इशारा नहीं करता।