फ़ेविकॉन बनाएं

एक आइकन नौ फ़ाइलें कैसे बन गया

सेट की हर फ़ाइल इसलिए है क्योंकि कोई ख़ास चीज़ उसे पढ़ती है और कुछ और नहीं पढ़ती। 16, 32 और 48 वाला favicon.ico आज भी वही है जिसे ब्राउज़र डिफ़ॉल्ट रूप से साइट रूट पर ढूंढता है, और बहुत-सा पुराना सॉफ़्टवेयर सबसे पहले इसी को जांचता है। favicon-16x16.png और favicon-32x32.png को आज के ब्राउज़र टैब के लिए पसंद करते हैं, क्योंकि सटीक साइज़ की PNG स्केलिंग से बेहतर होती है। 180 पिक्सेल वाला apple-touch-icon.png वह है जिसे iOS होम स्क्रीन पर लगाता है — इसमें ट्रांसपेरेंसी सपोर्ट नहीं होता, इसलिए इसे काले कोनों के साथ भेजने के बजाय एक ठोस बैकग्राउंड पर रखा जाता है। android-chrome-192x192.png और 512x512.png को इंस्टॉल किया गया प्रोग्रेसिव वेब ऐप अपने लॉन्चर आइकन और स्प्लैश स्क्रीन के लिए इस्तेमाल करता है, और इन्हें site.webmanifest में घोषित किया जाता है।

सबके लिए एक बड़ी PNG देना हर जगह ख़राब काम करता है, और यही सबसे आम शॉर्टकट है। ब्राउज़र सोलह पिक्सेल बनाने के लिए आधा मेगाबाइट डाउनलोड करता है, iOS ट्रांसपेरेंसी के नियमों को नज़रअंदाज़ करके आपका लोगो काले चौकोर पर रख देता है, और लॉन्चर आइकन उस मास्क से कट जाता है जो प्लेटफ़ॉर्म लगाता है। यह सेट झंझट वाला ठीक इसीलिए है क्योंकि हर इस्तेमाल करने वाले की अपनी ख़ास मांग है।

HTML स्निपेट उतना ही ज़रूरी है जितनी इमेज। ब्राउज़र इनमें से ज़्यादातर फ़ाइलें ख़ुद नहीं ढूंढते — परंपरा के मुताबिक़ सिर्फ़ रूट पर रखा favicon.ico ढूंढा जाता है — इसलिए link टैग ही उन्हें जोड़ते हैं, और manifest के लिए अलग टैग चाहिए। स्निपेट रूट-रिलेटिव पाथ इस्तेमाल करता है, जो तब तक बिना बदले काम करते हैं जब तक फ़ाइलें वेब रूट में हैं; अगर आप उन्हें किसी सबफ़ोल्डर में रखते हैं, तो स्निपेट और manifest दोनों के पाथ बदलने होंगे।

पहले 16 पिक्सेल के लिए डिज़ाइन करें। उस साइज़ पर एक आकार और शायद दो रंगों की ही जगह होती है — कोई टेक्स्ट नहीं, कोई ग्रेडिएंट नहीं, कोई बारीक डिटेल नहीं, और पूरा वर्डमार्क तो बिल्कुल नहीं। कम से कम 512 पिक्सेल की चौकोर, गाढ़ी, हाई-कॉन्ट्रास्ट सोर्स इमेज, या SVG, सबसे साफ़ सेट देती है; प्रीव्यू 16px रेंडरिंग को सजाकर नहीं, ईमानदारी से दिखाता है, क्योंकि बाद में निराश वही करेगी। जो सोर्स इमेज चौकोर नहीं हैं, उन्हें क्रॉप करने या खींचने के बजाय ट्रांसपेरेंट जगह जोड़कर चौकोर बनाया जाता है।

जब आपको कुछ और चाहिए

यहां बनने वाला सेट व्यावहारिक आधुनिक कोर है। अगर आपको पूरी लंबी सूची चाहिए — Windows टाइल इमेज, Safari का pinned-tab mask icon, Microsoft browserconfig, Apple के पुराने साइज़ — तो RealFaviconGenerator इन सबको कवर करता है और बाद में आपकी लाइव साइट की जांच भी करता है, जो सच में काम की चीज़ है और यह टूल नहीं कर सकता।

बिल्ड पाइपलाइन के लिए हाथ से आइकन बनाना पूरी तरह ग़लत तरीक़ा है। favicons, pwa-asset-generator और sharp पर बने फ़्रेमवर्क प्लगइन हर डिप्लॉय पर एक सोर्स फ़ाइल से पूरा सेट बनाते हैं, ताकि लोगो बदलने पर आइकन पुराने न रह जाएं — और असल में होता हमेशा यही है।