.ico आज भी साइट के रूट में अपेक्षित फ़ॉर्मैट है, और अधिकतर ऑनलाइन कन्वर्टर चित्र अपने सर्वर पर अपलोड करवाते हैं। जानें कि बिना कुछ अपलोड किए PNG से सही, कई आकारों वाला favicon.ico कैसे बनाएँ।
.ico सिर्फ़ नाम बदला हुआ चित्र नहीं है
logo.png का नाम favicon.ico कर देना काफ़ी नहीं है। ICO का अपना हेडर होता है: उसमें कितने चित्र हैं, उनके आकार क्या हैं और फ़ाइल में हर चित्र कहाँ से शुरू होता है, यह बताता है। नाम बदले हुए PNG में ऐसा हेडर नहीं होता और सख़्त जाँच वाले ब्राउज़र उसे दिखाने से मना कर देते हैं।
सही ICO में एक ही आइकन के कई रिज़ॉल्यूशन होते हैं। ब्राउज़र हेडर पढ़कर अपनी ज़रूरत के आकार के सबसे करीब वाला संस्करण चुनता है और किसी चित्र को बड़ा नहीं करना पड़ता।
तीन चरणों में PNG को ICO में बदलें
पहले मूल चित्र तैयार करें। कम-से-कम 512×512 पिक्सेल का वर्गाकार PNG सबसे अच्छा परिणाम देता है, क्योंकि हर आकार छोटा करके बनेगा। यदि पृष्ठभूमि पारदर्शी है तो अभी तय करें कि उसे रखना है या नहीं: टैब के लिए यह अच्छी है, लेकिन iOS और Android इसे काले रंग से भर देंगे।
दूसरे चरण में रिज़ॉल्यूशन बनाएँ। फ़ाइल में कम-से-कम 16×16, 32×32 और 48×48 होने चाहिए। आकार बदलने में अच्छी गुणवत्ता का री-सैंपलिंग फ़िल्टर इस्तेमाल होना चाहिए, वरना छोटे आकार पढ़ने योग्य नहीं रहेंगे।
तीसरे चरण में उन्हें पैक करें। तीनों चित्र एक ICO कंटेनर में जुड़ते हैं और हेडर हर प्रविष्टि का विवरण देता है। परिणाम को favicon.ico नाम से साइट के रूट में रखें, जहाँ ब्राउज़र उसे HTML टैग के बिना भी ढूँढ़ लेते हैं।
स्थानीय रूपांतरण क्यों मायने रखता है
अधिकतर PNG से ICO कन्वर्टर फ़ाइल सर्वर पर अपलोड करते हैं, वहाँ उसे बदलते हैं और परिणाम वापस भेजते हैं। आपका लोगो, कई बार सार्वजनिक लॉन्च से पहले ही, ऐसे कंप्यूटर पर पहुँच जाता है जिस पर आपका नियंत्रण नहीं है और ऐसी डेटा-रखरखाव नीति के अधीन होता है जिसे आपने पढ़ा नहीं है।
आधुनिक ब्राउज़र यह सब खुद कर सकता है: PNG पढ़ना, canvas पर आकार बदलना, हर आकार को फिर एन्कोड करना और ICO कंटेनर जोड़ना। LFFavicon यही करता है। किसी अनुरोध में आपका चित्र नहीं जाता और टैब बंद करते ही सब मिट जाता है।
लाभ केवल सैद्धांतिक नहीं है: रूपांतरण तुरंत होता है, पेज लोड होने के बाद ऑफ़लाइन भी चलता है, न कतार है और न रोज़ की सीमा।
अकेला .ico अब काफ़ी नहीं है
PNG को ICO में बदलने से टैब और पुराने क्लाइंट कवर होते हैं, लेकिन तीन जगह छूट जाती हैं: आधुनिक ब्राउज़र जो हर आकार में साफ़ रहने वाला SVG पसंद करते हैं, iOS होम स्क्रीन जिसे अपारदर्शी 180×180 PNG चाहिए और Android जो वेब मैनिफ़ेस्ट पढ़ता है।
जब चित्र पर काम कर ही रहे हैं, तो एक बार में पूरा सेट बनाएँ। जनरेटर यही करता है: एक मूल चित्र से .ico, SVG, Apple Touch आइकन और मैनिफ़ेस्ट आइकन बनते हैं। डाउनलोड करने से पहले हर जगह का पूर्वावलोकन दिखता है।
प्राथमिक स्रोत
अक्सर पूछे जाने वाले सवाल
ICO बनाने के लिए PNG का आकार कितना होना चाहिए?
कम-से-कम 512×512 पिक्सेल का वर्ग। 128×128 से नीचे होने पर पैकेज के बड़े आकार बढ़ाकर बनाने पड़ते हैं और परिणाम धुँधला दिखता है। SVG और बेहतर है, क्योंकि उसकी रिज़ॉल्यूशन सीमा नहीं होती।
क्या .ico में पारदर्शिता बनी रहती है?
हाँ, ICO फ़ॉर्मैट पूरा अल्फ़ा चैनल समर्थन देता है और पारदर्शी PNG टैब में पारदर्शी रहता है। लेकिन iOS आइकन का ध्यान रखें: सिस्टम पारदर्शी हिस्सों को काला भरता है, इसलिए उसकी पृष्ठभूमि रखें।
favicon.ico फ़ाइल कहाँ रखनी चाहिए?
डोमेन के रूट में, जहाँ वह https://yoursite.com/favicon.ico पर उपलब्ध हो। ब्राउज़र और क्रॉलर परंपरा के अनुसार ठीक यही पता माँगते हैं, भले ही कोई link टैग इसे घोषित न करे।