Favicon सिर्फ़ ब्राउज़र टैब का एक छोटा-सा आइकन नहीं है — इसे टैब, बुकमार्क, iOS होम स्क्रीन और इंस्टॉल की गई PWA, सबमें सही दिखना होता है, और हर जगह के लिए अलग साइज़ और फ़ॉर्मैट चाहिए होता है।
देवनागरी अक्षर को favicon बनाना आसान क्यों नहीं
अंग्रेज़ी ब्रांड अक्सर एक अकेला अक्षर ही favicon बना लेते हैं, पर देवनागरी में यह उतना सीधा नहीं। देवनागरी में कई व्यंजन मिलकर संयुक्ताक्षर (जैसे क्ष, त्र, ज्ञ) बनाते हैं, और मात्राएँ अक्षर के ऊपर, नीचे या बगल में जुड़ती हैं — 16×16 पिक्सेल पर ऐसे जटिल रूप आसानी से एक धुंधले धब्बे में बदल जाते हैं, जबकि सीधी आकृति वाला अकेला व्यंजन (जैसे "क" या "त") साफ़ बना रहता है।
<link> टैग: हर साइज़ के लिए अलग एंट्री
हर आइकन फ़ॉर्मैट अपने ख़ुद के <link rel="icon"> या <link rel="apple-touch-icon"> टैग से जुड़ा होता है, साथ में एक sizes एट्रिब्यूट जो साइज़ बताता है, ताकि ब्राउज़र सही विकल्प चुन सके।
PWA के लिए Web App Manifest
प्रोग्रेसिव वेब ऐप्स को site.webmanifest नाम की एक JSON फ़ाइल चाहिए होती है जिसमें अलग-अलग साइज़ के आइकन, ऐप का नाम और थीम कलर लिस्ट होते हैं — साइट को ऐप की तरह इंस्टॉल करते वक़्त Android होम स्क्रीन आइकन ठीक वहीं से लेता है।
यह क्यों ज़रूरी है
- एक ही सोर्स इमेज से ज़रूरी साइज़ में आइकन का पूरा सेट जनरेट करना।
- <head> में पेस्ट करने के लिए तैयार <link> टैग का HTML कोड पाना।
- यह पक्का करना कि मोबाइल डिवाइस की होम स्क्रीन पर जोड़ने पर साइट सही दिखे।