लेख
एक PNG से favicon बनाना
favicon एक छोटा ग्राफ़िक है जिसे ब्राउज़र टैब, बुकमार्क और इतिहास सूचियों में दिखाते हैं। इसे ठीक करना किसी लोगो का आकार बदलने से अधिक है: .ico फ़ॉर्मैट कई रिज़ॉल्यूशन एक फ़ाइल में पैक करता है, आधुनिक ब्राउज़र PNG पसंद करते हैं, मोबाइल डिवाइस का अपना apple-touch-icon होता है, और web app manifest को अपना icon समूह चाहिए। यह लेख हर हिस्से को देखता है और समझाता है कि एक ही स्रोत PNG से पूरा समूह कैसे बनाएँ।
favicon क्या है और ब्राउज़र इसे कहाँ उपयोग करते हैं
favicon शब्द "favorite icon" का संक्षिप्त रूप है। ब्राउज़र ने इसे पहले Internet Explorer 5 (1999) में पता-पट्टी में दिखाया, फिर बुकमार्क के लिए अपनाया। आज यह ब्राउज़र टैब, बुकमार्क टूलबार, ब्राउज़िंग इतिहास, कुछ ब्राउज़र में नए-टैब पृष्ठ, और किसी साइट के पिन होने पर ऑपरेटिंग सिस्टम के टास्कबार में दिखता है। मोबाइल पर, यदि कोई उपयोगकर्ता किसी साइट को अपनी होम स्क्रीन में जोड़ता है, डिवाइस मानक favicon के बजाय apple-touch-icon नामक एक संबंधित पर अलग छवि उपयोग करता है। खोज इंजन कभी-कभी अपने इंटरफ़ेस में परिणामों के साथ favicon दिखाते हैं। यह ग्राफ़िक डिज़ाइन से ही छोटा है, जो इसे त्वरित दृश्य पहचान के लिए प्रभावी बनाता है पर अच्छी तरह बनाना भी माँगता है: 16x16 पिक्सेल पर, एक विस्तृत लोगो एक धुँधली लकीर बन जाता है। favicon फ़ाइल स्वयं दशकों में कई फ़ॉर्मैट से गुज़री है, जिसमें .ico सबसे व्यापक रूप से संगत बना हुआ है और PNG अब अधिकांश ब्राउज़र के लिए आधुनिक डिफ़ॉल्ट है।
.ico कंटेनर: एक फ़ाइल में कई रिज़ॉल्यूशन
.ico फ़ॉर्मैट एक कंटेनर है, एक अकेली छवि नहीं। एक अकेली .ico फ़ाइल विभिन्न रिज़ॉल्यूशन पर कई bitmap छवियाँ रख सकती है, हर एक फ़ाइल के आरंभ में एक अनुक्रमणिका में अलग प्रविष्टि के रूप में संग्रहीत। तीन सबसे आम आकार 16x16, 32x32 और 48x48 पिक्सेल हैं। जब Windows किसी favicon को Explorer में या टास्कबार पर दिखाता है, वह उस प्रविष्टि को चुनता है जो प्रदर्शन संदर्भ से सबसे अच्छी मेल खाती है। पुराने Windows संस्करणों को उच्च-घनत्व टास्कबार स्लॉट के लिए एक 48x48 प्रविष्टि चाहिए थी। ब्राउज़र टैब के लिए favicon 16x16 पर माँगते हैं पर उच्च-घनत्व डिस्प्ले का पता चलने पर एक बड़ी प्रविष्टि उपयोग कर सकते हैं। तीनों आकार एक .ico फ़ाइल में पैक करने का अर्थ है कि एक अकेला HTTP अनुरोध हर उपयोग-मामले को समेटता है। उन्हें अलग PNG के रूप में बाँटना भी वैध है पर अतिरिक्त link टैग और अतिरिक्त HTTP अनुरोध माँगता है। .ico फ़ाइल के भीतर की छवियाँ मानक BMP या PNG डेटा हैं, इसलिए कंटेनर प्रति प्रविष्टि केवल एक छोटा हेडर ओवरहेड जोड़ता है।
छोटे आकार के लिए डिज़ाइन: चिह्न को सरल करें
16x16 पिक्सेल पर आपके पास कुल 256 पिक्सेल होते हैं। शब्द-चिह्न या बारीक विवरण वाला एक सामान्य लोगोटाइप उस आकार पर अपठनीय हो जाता है। मानक तरीक़ा एक सरलीकृत चिह्न बनाना है: एक अकेला अक्षर, एक अमूर्त आकृति, या एक icon जो विवरण पर निर्भर हुए बिना ब्रांड का प्रतिनिधित्व करे। कुछ विशिष्ट समस्याओं की पहले से उम्मीद रखें: पतली रेखाएँ छोटे आकार पर पूरी तरह ग़ायब हो जाती हैं, ख़ासकर ग़ैर-retina स्क्रीन पर। अक्षर-जोड़े और ऋण-स्थान (negative-space) विवरण धूसर शोर में मिल जाते हैं। ग्रेडिएंट मुश्किल से दिखते हैं। चिह्न और उसकी पृष्ठभूमि के बीच उच्च कंट्रास्ट पठनीयता का सबसे बड़ा कारक है। एक सादे पृष्ठभूमि पर एक ठोस आकृति 16x16 पर एक विस्तृत चित्रण से लगभग हमेशा बेहतर पढ़ी जाती है। 32x32 और 48x48 आकार अधिक उदार हैं और थोड़ा अधिक विवरण सह सकते हैं, पर 16x16 संस्करण को बाध्यकारी सीमा माना जाना चाहिए। यदि चिह्न 16x16 पर भी नहीं पढ़ा जाता, डिज़ाइन को और सरल करने की ज़रूरत है।
आधुनिक समूह: .ico, PNG icon, apple-touch-icon, manifest और HTML link टैग
किसी सार्वजनिक साइट के लिए एक पूरा favicon सेटअप अभी पाँच चीज़ें माँगता है। पहला, साइट की जड़ में एक favicon.ico (ब्राउज़र एक fallback के रूप में बिना किसी link टैग के सीधे /favicon.ico माँगते हैं)। दूसरा, आधुनिक डेस्कटॉप ब्राउज़र के लिए एक 32x32 PNG, एक link टैग से घोषित: `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">`। तीसरा, टैब आकार के लिए एक 16x16 PNG: `<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">`। चौथा, iOS होम स्क्रीन बुकमार्क के लिए 180x180 पिक्सेल पर एक apple-touch-icon: `<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">`। पाँचवाँ, Android और progressive web app के लिए एक 192x192 और एक 512x512 PNG वाला एक web app manifest (site.webmanifest)। पारदर्शिता PNG में और .ico के भीतर PNG-एन्कोडेड प्रविष्टियों में समर्थित है, हालाँकि apple-touch-icon की पृष्ठभूमि अपारदर्शी होनी चाहिए क्योंकि iOS alpha चैनल को नज़रअंदाज़ करता है और पारदर्शी क्षेत्रों को काले से भर देता है।
स्थानीय रूप से करना: favicon-generator आपकी छवि आपके डिवाइस पर रखता है
इस साइट का favicon-generator एक PNG लेता है और पूरा समूह बनाता है: 16x16, 32x32 और 48x48 प्रविष्टियों से पैक एक बहु-रिज़ॉल्यूशन favicon.ico, सीधे link-टैग उपयोग के लिए अलग PNG आकार, और 180x180 apple-touch-icon। यह सब आपके ब्राउज़र में Canvas API और एक JavaScript .ico एन्कोडर से होता है। आपकी स्रोत छवि कभी कहीं अपलोड नहीं होती; वह आपके डिवाइस पर रहती है। यह तब मायने रखता है जब स्रोत फ़ाइल एक कंपनी का लोगो या ऐसी कोई सामग्री हो जो आपके यह नियंत्रित करने से पहले आपकी मशीन न छोड़े कि वह कहाँ जाए। हर बनाई गई फ़ाइल अपने अलग डाउनलोड के रूप में दी जाती है, परंपरागत फ़ाइल-नामों के साथ। आप उन्हें अपनी साइट की जड़ में कॉपी करते हैं और संगत link टैग अपने HTML head में जोड़ते हैं। यदि आपके स्रोत लोगो में बारीक विवरण हैं जो 16x16 रेंडर में टिकते नहीं, आप जनरेटर में डालने से पहले उसे क्रॉप या सरल कर सकते हैं, या favicon के लिए ख़ास तैयार एक अलग स्रोत छवि दे सकते हैं।
इस लेख में उल्लेखित टूल्स
अक्सर पूछे जाने वाले सवाल
यदि मैं PNG link टैग घोषित करूँ तो भी क्या मुझे favicon.ico चाहिए?
हाँ, दो कारणों से। पहला, जो ब्राउज़र आपका HTML नहीं पढ़ते (वेब क्रॉलर, RSS रीडर, कुछ पुराने मोबाइल ब्राउज़र) डोमेन की जड़ में सीधे /favicon.ico ढूँढते हैं। यदि वह फ़ाइल अनुपस्थित हो तो वे हर पृष्ठ लोड पर एक 404 अनुरोध बनाते हैं, जो आपके सर्वर लॉग में शोर और एक छोटा अनावश्यक चक्कर जोड़ता है। दूसरा, Internet Explorer के पुराने संस्करण केवल .ico फ़ॉर्मैट पहचानते हैं और PNG link टैग नज़रअंदाज़ करते हैं। दोनों देना हर मामले को समेटता है।
क्या मैं favicon के रूप में एक SVG उपयोग कर सकता हूँ?
Chrome और Firefox `<link rel="icon" type="image/svg+xml" href="/favicon.svg">` के ज़रिए SVG favicon का समर्थन करते हैं। Safari SVG favicon का समर्थन नहीं करता। चूँकि SVG favicon रिज़ॉल्यूशन-स्वतंत्र हैं वे किसी भी डिस्प्ले घनत्व पर, retina स्क्रीन सहित, बिना अनेक आकार-संस्करणों के तीखे दिखते हैं। व्यावहारिक सलाह है कि समर्थन करने वाले ब्राउज़र के लिए SVG link टैग घोषित करें और पूरी कवरेज के लिए फिर भी .ico fallback रखें। SVG favicon में हल्के और गहरे संस्करण के बीच स्वतः बदलने के लिए एक `prefers-color-scheme` media query भी हो सकती है।
सबसे अच्छा परिणाम पाने के लिए मुझे किस छवि से शुरू करना चाहिए?
पारदर्शी पृष्ठभूमि वाला 512x512 या उससे बड़ा एक वर्गाकार PNG सबसे अधिक लचीलापन देता है। बड़ा शुरू कर घटाना एक छोटी छवि से शुरू करने की तुलना में अधिक विवरण बचाता है। यदि आपके मुख्य लोगो में एक शब्द-चिह्न है, केवल icon या चिह्न दिखाने वाला एक अलग सरलीकृत संस्करण तैयार करने पर विचार करें, क्योंकि स्रोत रिज़ॉल्यूशन चाहे जो हो, टेक्स्ट 16x16 पर पठनीय नहीं होगा। चिह्न और उसकी पृष्ठभूमि के बीच उच्च कंट्रास्ट इसका सबसे भरोसेमंद पूर्वसूचक है कि छोटे आकार साफ़ पढ़े जाएँगे या नहीं।