ऐसा favicon कैसे बनाएँ जो सोलह पिक्सल पर भी पढ़ा जाए

छोटा जवाब

तस्वीर से ICO खोलिए, कम से कम 256 पिक्सल की कोई वर्गाकार तस्वीर भीतर छोड़िए, तैयार विकल्प वेबसाइट favicon पर ही रहने दीजिए, और favicon.ico डाउनलोड कर लीजिए। उसे अपनी साइट की जड़ में रखिए, ताकि वह https://yoursite.com/favicon.ico पर जवाब दे। हर ब्राउज़र यह पता माँगता है, चाहे आपकी HTML उसका ज़िक्र करे या न करे, इसलिए सख्ती से कहें तो इसके आगे आपको कुछ करना ही नहीं है।

नीचे लिखा सब कुछ वह हिस्सा है जो तकनीकी रूप से मौजूद आइकन और पढ़े जा सकने वाले आइकन के बीच फ़र्क पैदा करता है: उसमें कौन-से साइज़ जाते हैं, iPhone और Android इसके बजाय क्या माँगते हैं, और जब आपका लोगो सोलह पिक्सल चौड़ा होकर टिक न पाए तो क्या करें।

यह एक तस्वीर के बजाय साइज़ों का समूह क्यों है

.ico फ़ाइल एक कंटेनर है। उसके भीतर एक ही चीज़ की कई पूरी तस्वीरें अलग-अलग साइज़ों पर रहती हैं, और उस फ़ाइल को जो भी पढ़ रहा हो, वह अपनी ज़रूरत के सबसे करीब वाली चुन लेता है।

यह दोहराव जैसा लगता है और है नहीं। सोलह पिक्सल पर आपका आइकन खींच रहे ब्राउज़र के पास दो रास्ते हैं: वह सोलह-पिक्सल वाला रूप पढ़े जो आपने बनाया, या मौके पर किसी बड़े को छोटा कर ले। दूसरा बुरा है, और साफ़ दिखने वाले ढंग से बुरा, क्योंकि किसी ब्योरे वाले लोगो को अपने आप छोटा करने से लुगदी बनती है, जबकि सोलह पिक्सल का वह रूप जिसे आपने देखा था, ऐसा है जिसे सरल बनाने का मौका आपको मिला था। फ़ॉर्मैट के कई साइज़ रखने की पूरी वजह ही यह है कि आपको वह मौका मिले।

वेबसाइट के लिए तीन साइज़ की परंपरा है, और हर एक की एक वजह है:

• ⁦16×16⁩ — ब्राउज़र का टैब, पते वाली पट्टी, बुकमार्क मेन्यू। यही वह है जो लोगों को दिखता है। सिर्फ़ एक ही ठीक कर सकते हों, तो इसी को ठीक कीजिए।
• ⁦32×32⁩ — बुकमार्क बार, आपकी साइट का Windows डेस्कटॉप शॉर्टकट, और high-DPI स्क्रीन पर ज़्यादातर ब्राउज़र, जो टैब का आइकन 32 से खींचकर छोटा कर लेते हैं।
• ⁦48×48⁩ — जिस साइज़ पर Google खोज नतीजों के लिए साइट का आइकन पढ़ता है, और Windows का मझोला आइकन व्यू।

इससे बड़ा कुछ भी .ico के भीतर नहीं, उसके बगल में PNG के रूप में रहना चाहिए, और इसकी वजहें नीचे मोबाइल फ़ाइलों वाले हिस्से में आती हैं।

सोलह पिक्सल वाली समस्या

यही वह हिस्सा है जिसके बारे में कोई आपको चेतावनी नहीं देता। आम स्क्रीन पर सोलह पिक्सल करीब चार मिलीमीटर होते हैं: कुल मिलाकर 256 बिंदुओं की जाली, यानी इस वाक्य के अक्षरों से भी कम। जो कुछ भी किसी साइनबोर्ड, विज़िटिंग कार्ड या वेबसाइट के हेडर के लिए बनाया गया था, वह लगभग कभी उतना छोटा होकर टिकता नहीं।

क्या-क्या गायब होता है, इसी क्रम में:

• टेक्स्ट। वर्ग में सिकोड़ा गया वर्डमार्क करीब तीन पिक्सल ऊँचा होता है। वह छोटा टेक्स्ट नहीं बनता, वह भूरी पट्टी बन जाता है। इसीलिए जिन कंपनियों के पास नाम के साथ कोई चिह्न भी है उनमें से लगभग हर एक अपने favicon के लिए अकेले चिह्न का इस्तेमाल करती है, और जिनके पास चिह्न नहीं है वे एक ही अक्षर का।
• पतली लकीरें। 512 पिक्सल के लोगो पर एक पिक्सल का किनारा सोलह पर एक पिक्सल का बत्तीसवाँ हिस्सा है। वह किनारे पर फीली भूरी धुंध की तरह बनता है, या गायब हो जाता है।
• ग्रेडिएंट और छायाएँ। वहाँ किसी संक्रमण की जगह ही नहीं है। नरम ड्रॉप शैडो एक मैली झालर बन जाती है।
• ब्योरे के भीतर का ब्योरा। लिखावट वाले दस्तावेज़ का आइकन एक आयत और एक धब्बा बन जाता है।

इसका इलाज कोई सेटिंग नहीं, एक अलग ड्रॉइंग है: एक-दो आकृतियों वाला सरल चिह्न, ऊँचा अंतर, और एक अक्षर से आगे कोई टेक्स्ट नहीं। वह रूप 32 या 48 पिक्सल पर जान-बूझकर बनाइए, और उसी को स्रोत की तरह इस्तेमाल कीजिए।

टूल इतना कर सकता है कि प्रकाशित करने से पहले आपको समस्या दिखा दे। तस्वीर से ICO का प्रीव्यू हर साइज़ को स्क्रीन पर उसके असली साइज़ पर खींचता है, और इसे परखने का अकेला तरीका यही है, क्योंकि चौंसठ पर दिखाया गया सोलह-पिक्सल का आइकन ठीक लगता है और आपको कुछ नहीं बताता।

आपका लोगो वर्गाकार नहीं है। खाली जगह भरें या क्रॉप करें?

आइकन हमेशा वर्गाकार होता है, और ज़्यादातर लोगो नहीं, इसलिए कुछ न कुछ होना ही है। तीन जवाब हैं और वे बराबर के अच्छे नहीं हैं।

खाली जगह भरना पूरी तस्वीर बचा लेता है और उसके ऊपर-नीचे जगह छोड़ देता है। यह सुरक्षित डिफ़ॉल्ट है और चौड़े वर्डमार्क के लिए गलत चुनाव: जो चीज़ अपनी ऊँचाई से तीन गुना चौड़ी है उसे वर्ग में बिठाने पर वह ऊँचाई का एक-तिहाई घेरती है, जो सोलह पिक्सल पर पाँच पिक्सल लोगो और ग्यारह पिक्सल कुछ नहीं है।

बीच से क्रॉप करना बीच में से सबसे बड़ा वर्ग निकाल लेता है। लॉकअप के लिए, यानी चिह्न और उसके बगल में कंपनी के नाम के लिए, यह अक्सर दोनों को बीच से काट देता है। बेहतर यह है कि आप स्रोत को पहले खुद काटकर अकेले चिह्न तक ले आएँ, और फिर उसे बदलें।

खींचना तस्वीर को फ़िट करने के लिए निचोड़ देता है। ऐसी लगभग कोई स्थिति नहीं जिसमें यह सही हो, और यह मुख्यतः इसलिए दिया गया है ताकि टूल चुपचाप यह न कर रहा हो।

चौड़े लोगो के लिए आम जवाब: लोगो को मत बदलिए। उसके उस हिस्से को बदलिए जो अकेले भी चलता है।

पारदर्शी या कोई ठोस बैकग्राउंड?

वेबसाइट के लिए आम तौर पर पारदर्शी ही सही रहता है। ब्राउज़र और थीम के हिसाब से टैब भूरे, सफ़ेद या लगभग काले होते हैं, और पारदर्शी आइकन इन सब पर बैठ जाता है। जिस आइकन में सफ़ेद बैकग्राउंड भरा है, वह गहरे टैब बार में एक सफ़ेद आयत है।

दो अपवाद जानने लायक हैं:

• जो लोगो गहरा है और उसके सिवा कुछ नहीं, वह डार्क मोड में गायब हो जाता है। अगर आपका चिह्न स्वभाव से ही सफ़ेद पर काला है, तो उसे पारदर्शी के बजाय कोई रंगीन बैकग्राउंड दीजिए, या हल्की बाहरी रेखा।
• Apple touch icon का अपारदर्शी होना ज़रूरी है। iOS उसे अपनी ही गोल कोनों वाली टाइल पर खींचता है और पारदर्शिता को काला बना देता है। जो भी टूल वह फ़ाइल बनाता है उसे उसे आपके लिए चपटा कर देना चाहिए; यहाँ वाला करता है, और डिफ़ॉल्ट रूप से सफ़ेद पर।

वेबसाइट को जो फ़ाइलें चाहिए और जो .ico नहीं हैं

favicon.ico ब्राउज़रों और Windows को ढक लेती है। वह फ़ोन को नहीं ढकती, और घर पर बने ज़्यादातर आइकन सेट यहीं, वक्त से पहले रुक जाते हैं। तीन दूसरे प्लैटफ़ॉर्म अपनी-अपनी फ़ाइलें, अपने-अपने नामों से माँगते हैं, और इनमें से कोई भी .ico के भीतर नहीं झाँकेगा:

• iOS तब ⁦180×180⁩ की apple-touch-icon.png पढ़ता है जब कोई आपकी साइट अपनी होम स्क्रीन पर जोड़ता है। उसके बिना iOS पेज का स्क्रीनशॉट इस्तेमाल कर लेता है, जो किसी गलती जैसा दिखता है।
• Android और हर इंस्टॉल प्रॉम्प्ट एक web app manifest पढ़ते हैं, यानी site.webmanifest, जो 192 और 512 पिक्सल की PNG की तरफ़ इशारा करता है। 512 वही है जो कोई वेब ऐप अपनी स्प्लैश स्क्रीन पर दिखाता है।
• Windows के स्टार्ट मेन्यू की टाइल browserconfig.xml पढ़ती है, जो ⁦150×150⁩ की PNG की तरफ़ इशारा करता है। तीनों में महत्व के हिसाब से सबसे छोटा, और चार पंक्तियों का XML।

एक और है जो आसानी से बिगड़ जाता है: Android के लॉन्चर adaptive आइकन को उसी आकार में काट देते हैं जो फ़ोन को पसंद हो, चाहे वह गोल हो, चौकोर-गोल हो या गोल कोनों वाला वर्ग, और गारंटी सिर्फ़ तस्वीर के बीच के 80% के बचे रहने की है। किनारे से किनारे तक खींचा गया आइकन अपने कोने गँवा देता है। maskable आइकन यही है: वही तस्वीर, वर्ग के भीतर जान-बूझकर छोटी खींची गई, और मैनिफ़ेस्ट में अलग से घोषित।

तस्वीर से ICO में वेबसाइट वाला सेट चुनने पर ये सब बन जाते हैं, साथ में मैनिफ़ेस्ट और HTML का वह टुकड़ा जो इनकी तरफ़ इशारा करता है। उस टुकड़े में जान-बूझकर एक चीज़ छोड़ी गई है: favicon.ico के लिए कोई <link> नहीं है। ब्राउज़र वह पता खुद ही माँगते हैं, और उसका नाम भी लिख देने से वही फ़ाइल दो बार लाई जाती है।

Windows ऐप्लिकेशन का आइकन एक अलग सेट है

अगर आइकन किसी साइट के लिए नहीं, किसी प्रोग्राम के लिए है, तो साइज़ बदल जाते हैं। Visual Studio की अपनी डिफ़ॉल्ट app.ico में जो होता है वह है 16, 32, 48 और 256, यानी शेल के तीन साइज़ और वह बड़ा वाला जिससे स्टार्ट मेन्यू तथा Explorer का अतिरिक्त-बड़ा व्यू खींचते हैं।

high-DPI डिस्प्ले पर Windows 20, 24, 40, 64 और 96 भी माँगता है, और वे न मिलें तो अपने पास मौजूद सबसे नज़दीकी साइज़ से उन्हें दोबारा नमूना लेकर बना लेता है। इससे फ़र्क पड़ता है या नहीं, यह आपके आइकन पर निर्भर है: सपाट आकृति उस दोबारा-नमूने में टिक जाती है, ब्योरे वाली नहीं। इन्हें जोड़ने से फ़ाइल मोटे तौर पर दोगुनी हो जाती है, जो किसी ऐप्लिकेशन के लिए कुछ भी नहीं है। यह हिसाब favicon से बिलकुल अलग है, जहाँ फ़ाइल हर विज़िटर लाता है।

साइज़ के बारे में एक और बात: बाइट 256 वाली प्रविष्टि में ही हैं। बिना दबे वह अकेली 264 KB की होती है; आइकन के भीतर PNG के रूप में रखी जाए तो आम तौर पर 30 से भी कम। PNG प्रविष्टियाँ Windows Vista से पढ़ी जा सकती हैं, इसलिए उनसे बचने की अकेली वजह उससे भी सचमुच पुराना सॉफ़्टवेयर है, या कोई ऐसा इंस्टॉलर या एम्बेडेड टूल जो आइकन खुद पढ़ता हो।

Mac बिलकुल अलग फ़ाइल पढ़ता है

अगर आइकन Windows के नहीं, Mac के ऐप्लिकेशन के लिए है, तो ऊपर लिखा कुछ भी लागू नहीं होता: macOS .ico पढ़ता ही नहीं। वह .icns पढ़ता है, जो उसी विचार का दूसरा लपेटन है, यानी एक ही कंटेनर में कई साइज़, और उसमें तीन फ़र्क जानने लायक हैं।

• साइज़ तय हैं। Apple दस खाने प्रकाशित करता है और चुनने को कुछ है ही नहीं: 16, 32, 64, 128, 256, 512 और 1024 पिक्सल, जिनमें 32, 256 और 512 दो-दो बार आते हैं, क्योंकि हर एक अपने आप में एक साइज़ भी है और नीचे वाले साइज़ का Retina रूप भी।
• यह 1024 तक जाती है। .ico 256 पर रुक जाती है, और इसीलिए Mac की आइकन फ़ाइल कई सौ किलोबाइट की होती है और favicon पंद्रह की। एक बार भेजे जाने वाले ऐप्लिकेशन के लिए यह कुछ भी नहीं है; सिर्फ़ favicon ही है जिसे हर विज़िटर लाता है।
• 1024 पिक्सल वह है जिसमें आपकी कलाकृति को टिकना है। दोनों समस्याएँ एक ही तस्वीर के आमने-सामने के छोर हैं: favicon को तब चलना है जब वह नन्ही हो, और Mac के आइकन को तब टिकना है जब वह विशाल हो। 512 पर एक्सपोर्ट करके 1024 तक फुलाया गया लोगो Retina डिस्प्ले पर नरम दिखता है, और App Store उसे लेगा नहीं।

इसका इस्तेमाल कैसे करें: कोई ऐप्लिकेशन बंडल उसे YourApp.app/Contents/Resources/ में रखता है और Info.plist में उसका नाम लिखता है। किसी फ़ोल्डर या डिस्क इमेज के लिए, Finder में .icns चुनिए, Command-C दबाइए, फिर जिस चीज़ को बदलना है उस पर Get Info कीजिए, ऊपर बाएँ कोने के छोटे आइकन पर क्लिक कीजिए और Command-V दबा दीजिए।

तस्वीर से ICO में macOS आइकन चुनने पर वह एक लिख देता है, चाहे बगल में Windows वाली फ़ाइल हो या न हो। जो चीज़ दोनों प्लैटफ़ॉर्म पर जाती है उसे दोनों चाहिए, और दोनों एक ही तस्वीर से, एक ही बार में खींचे जाते हैं।

जाँचना कि यह चला या नहीं

ब्राउज़र favicon को लगभग हर चीज़ से ज़्यादा सख्ती से कैश करते हैं, इसलिए “मैंने अपलोड कर दिया और कुछ बदला ही नहीं” आम तौर पर कैश होती है, गलती नहीं। दोबारा फ़ाइलें संपादित करने बैठने से पहले दो चीज़ें आज़माइए:

• https://yoursite.com/favicon.ico सीधे खोलिए। अगर फ़ाइल डाउनलोड होती है, तो वह वहाँ है और आप कैश देख रहे हैं। अगर 404 मिलता है, तो वह जड़ में नहीं है।
• साइट को किसी निजी विंडो में लोड कीजिए, जिसके पास आम तौर पर अपना अलग आइकन कैश होता है।

Windows पर .ico को इस तरह जाँचा जा सकता है कि उसे किसी फ़ोल्डर में रखिए और Explorer को उसके व्यू साइज़ों से गुज़ारिए: छोटा, मझोला, बड़ा और अतिरिक्त-बड़ा उसी एक फ़ाइल में से अलग-अलग प्रविष्टियाँ खींचते हैं, इसलिए आप हर एक को वैसे ही देख सकते हैं जैसे सिस्टम देखेगा।

Mac पर .icns Preview में खुलती है, जो हर खाने की सूची बगल में बना देता है। वही तरकीब Finder में भी चलती है। उसे किसी फ़ोल्डर में रखिए और व्यू विकल्पों में साइज़ का स्लाइडर खींचकर देखिए कि वह भीतर की तस्वीरों के बीच कैसे बदलता है।

इसमें से किसी के लिए अपलोड की ज़रूरत नहीं

तस्वीर का आकार बदलना वह काम है जो हर ब्राउज़र सालों से करता आया है, और .ico है छह बाइट का हेडर, हर तस्वीर के लिए सोलह बाइट, और फिर तस्वीरें। इसे बनाने के किसी कदम में सर्वर की ज़रूरत नहीं है, और यहाँ का टूल एक इस्तेमाल भी नहीं करता: पेज की Content-Security-Policy उन सारे पतों के नाम गिना देती है जिनसे वह संपर्क कर सकता है, और उनमें से एक भी इस साइट का नहीं है।

यहाँ इसकी परवाह आम से ज़्यादा करनी चाहिए। किसी मुफ़्त favicon जनरेटर को सौंपा गया लोगो अक्सर ऐसा ब्रैंड होता है जो अभी जारी ही नहीं हुआ। आइकन सबसे पहले बनने वाली चीज़ों में से एक होता है और सबसे आखिर में घोषित होने वाली चीज़ों में से भी। सिर्फ़ बता देने से बात न बने, तो पेज लोड कीजिए, इंटरनेट काट दीजिए, और तब भी एक बनाकर देख लीजिए। क्या ऑनलाइन कन्वर्टर पर फ़ाइलें अपलोड करना सुरक्षित है? ऐसी ही तीन और जाँचें बताता है, जो आप किसी भी टूल पर चला सकते हैं।