PNG को ICO में बदलें

PNG को ICO में बदलने वाला लगभग हर कोई फ़ेविकॉन बना रहा होता है। ब्राउज़र लगभग तीस साल से हर साइट की जड़ से `/favicon.ico` माँगते आए हैं, और अब भी माँगते हैं, चाहे आपका HTML कुछ भी कहे — इसलिए वहाँ एक फ़ाइल होने से लॉग में 404 की झड़ी रुकती है और वे औज़ार भी सँभल जाते हैं जो और कुछ नहीं देखते।

आधुनिक फ़ेविकॉन मार्कअप PNG या SVG की ओर भी इशारा कर सकता है, और ज़्यादातर साइटें दोनों भेजती हैं। ICO वह फ़ॉलबैक है जिसे कभी घोषित करना नहीं पड़ता।

यह संपीड़न फ़ॉर्मेट नहीं, एक कंटेनर है, यही वजह है कि इस बदलाव में मायने रखने वाला कुछ नहीं खोता। आपकी तस्वीर इसके भीतर PNG की तरह रखी जाती है — डायरेक्टरी में हर आकार के लिए एक — अपने अल्फ़ा चैनल समेत, इसलिए गोल या कटा हुआ लोगो अपने पारदर्शी कोने बिलकुल वैसे ही रखता है।

एक सीमा फ़ॉर्मेट से आती है और वह पक्की है: आइकन 256 पिक्सल पर रुकता है, इसलिए इससे बड़ा कुछ भी घटाकर वहाँ लाया जाता है। ICO डायरेक्टरी एंट्री में आकार का बाइट सिर्फ़ एक बाइट का है, और 256 को शून्य लिखा जाता है क्योंकि वह उसमें समाता नहीं।

उस छत के नीचे चुनाव आपका है। «Icon sizes» नियंत्रण तय करता है कि डायरेक्टरी में क्या जाए, और तयशुदा सेटिंग तीन एंट्री लिखती है — 48, 32 और 16 पिक्सल, सबसे बड़े से शुरू — हर एक अपनी अलग PNG के रूप में सहेजी हुई। यही वह व्यवस्था है जो फ़ेविकॉन को शुरू से चाहिए थी: ब्राउज़र डायरेक्टरी पढ़ता है और जो आकार चाहिए उसके सबसे क़रीब वाला उठाता है, एक बड़ी तस्वीर को किसी आम फ़िल्टर से घटाने के बजाय।

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

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

16 और 32 पिक्सल व्यवहार में सबसे ज़्यादा मायने रखते हैं: 16 ब्राउज़र टैब और बुकमार्क सूची के लिए, 32 टास्कबार और ज़्यादातर डेस्कटॉप जगहों के लिए। Windows कुछ नज़ारों में 48 और 256 पर भी आइकन खींचता है।

यही तीन तयशुदा सेट लिखता है, इसीलिए वह तयशुदा है। फिर भी बड़े स्रोत से शुरू कीजिए: हर एंट्री उसी तस्वीर से घटाई जाती है जो आपने छोड़ी थी, इसलिए 256-पिक्सल PNG साफ़-सुथरा 48, 32 और 16 देता है, जबकि 32-पिक्सल स्रोत को 256 माँगने पर बड़ा किया जाता है और उतना ही ख़राब दिखता है जितना यह सुनने में लगता है।

जो पकड़ में आती है वह दिक़्क़त फ़ॉर्मेट की नहीं, गणित की है। 16 पिक्सल पर अक्षर की ऊँचाई क़रीब दस पिक्सल होती है, जो किसी वर्डमार्क, टैगलाइन या बाक़ी से पतली किसी रेखा के लिए काफ़ी नहीं।

जो काम करता है वह है एक आकार, ऊँचा कंट्रास्ट, कम रंग: पूरा नाम नहीं, शुरुआती अक्षर; पूरा लॉक-अप नहीं, सिर्फ़ चिह्न। बदलने से पहले PNG को 16 पिक्सल पर घटाकर परखिए — अगर पहचान न आए, तो कोई फ़ॉर्मेट उसे बचा नहीं सकता।

इसे साइट की जड़ में favicon.ico के नाम से रखिए। यह अकेला ठिकाना सीधे माँगे जाने की स्थिति को सँभालता है, फ़ीड रीडर और उन पुराने औज़ारों को भी जो और कहीं नहीं देखते।

HTML के head में इसे घोषित करना भी लायक़ है, साथ में आधुनिक ब्राउज़र के लिए PNG और iOS होम स्क्रीन के लिए apple-touch-icon। ICO बुनियाद है, पूरी रणनीति नहीं।

लगभग हमेशा कैशिंग, और फ़ेविकॉन असामान्य रूप से कड़ाई से कैश होते हैं — ब्राउज़र, सामने खड़े किसी CDN, और कभी-कभी ऑपरेटिंग सिस्टम से भी।

यह पक्का करने के लिए कि नई फ़ाइल परोसी जा रही है आइकन का URL सीधे खोलिए, फिर पूरे ब्राउज़र के बजाय सिर्फ़ उस साइट के लिए साइट डेटा साफ़ कीजिए। अगर सामने CDN है तो वहाँ भी purge कीजिए। फ़ाइल सही है यह पक्का होने के बाद, बाक़ी सिर्फ़ इंतज़ार है।

एक बार में सौ PNG तक छोड़ दीजिए। हर एक अपना ICO बनता है और सब मिलकर ZIP में लौटते हैं, जो किसी ऐप या कई साइटों के लिए एक-एक आइकन चाहने वाले किसी काम के लिए ठीक बैठता है।

बदलाव आपके ब्राउज़र में चलता है, इसलिए न अपलोड है, न क़तार, न रोज़ की कोई सीमा। दूसरी सीमा 100 MB प्रति फ़ाइल है, और आइकन इतने छोटे होते हैं कि यह कभी रुकावट नहीं बनती।