“फ़ेविकॉन का आकार” खोजने पर आज भी 2014 की पंद्रह फ़ाइलों वाली सूचियाँ मिलती हैं। असल में अब छह आकार ब्राउज़र टैब, खोज परिणाम, iOS, Android और PWA के लिए काफ़ी हैं। आइए जानें कौन से और क्यों।
असल में आपको इन आकारों की ज़रूरत है
हर पंक्ति सुझाए गए पैकेज के एक दस्तावेज़ित उपयोग से जुड़ी है। यह तालिका पुराने संस्करणों के ढेर के बजाय अलग-अलग प्रणालियों में चलने वाले छोटे सेट को प्राथमिकता देती है।
| फ़ाइल | आकार | उपयोग |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | टैब, बुकमार्क, पुराने ब्राउज़र, क्रॉलर |
| favicon.svg | वेक्टर, वर्गाकार | आधुनिक ब्राउज़र, हर आकार में साफ़, डार्क मोड समर्थित |
| favicon-96x96.png | 96×96 | मोबाइल पर Google खोज परिणाम |
| apple-touch-icon.png | 180×180 | iOS और iPadOS होम स्क्रीन, बिना पारदर्शिता |
| web-app-manifest-192x192.png | 192×192 | Android होम स्क्रीन, वेब मैनिफ़ेस्ट में घोषित |
| web-app-manifest-512x512.png | 512×512 | PWA की शुरुआती स्क्रीन, “maskable” संस्करण |
16, 32 और 48 एक ही .ico में क्यों होते हैं
ICO एक कंटेनर फ़ॉर्मैट है: एक फ़ाइल में कई चित्र हो सकते हैं और ब्राउज़र अपने प्रदर्शन के अनुसार सही चित्र चुनता है। यही चाहिए, क्योंकि ज़रूरी आकार उपयोग की स्थिति के साथ बदलता है।
16×16 सामान्य स्क्रीन के टैब के लिए है। 32×32 अधिक पिक्सेल घनत्व वाली स्क्रीन और ब्राउज़र के अन्य इंटरफ़ेस के काम आता है। 48×48 कंटेनर को पूरा करता है और खोज परिणामों के फ़ेविकॉन के लिए Google के दस्तावेज़ों में दिए गए 48 के गुणज वाले नियम का भी पालन करता है।
सिर्फ़ 16×16 वाला .ico देना सबसे आम गलती है: Retina स्क्रीन पर आपका आइकन बड़ा करके दिखाया जाता है और हमेशा धुँधला लगता है।
iOS के लिए 180×180, Android के लिए 192 और 512
iOS होम स्क्रीन आइकन के लिए वेब मैनिफ़ेस्ट नहीं पढ़ता: वह apple-touch-icon टैग खोजता है। एक 180×180 आकार काफ़ी है, जो सभी हाल के iPhone और iPad पर काम करता है। पुराने डिवाइस के लिए सिस्टम खुद छोटा कर देता है।
Android इसके बजाय वेब मैनिफ़ेस्ट पढ़ता है। दो प्रविष्टियाँ काफ़ी हैं: होम स्क्रीन के लिए 192×192 और साइट को ऐप की तरह इंस्टॉल करने पर शुरुआती स्क्रीन के लिए 512×512। 512 वाले संस्करण में purpose “maskable” घोषित करें, यानी चित्र ऐसा हो कि गोल या गोल कोनों वाले वर्ग में कटने पर भी सही दिखे।
maskable आइकन में ज़रूरी हिस्से बीच के 80% क्षेत्र में रखें। फ़ोन निर्माता के अनुसार इसके बाहर का हिस्सा कट सकता है।
शुरुआत किस मूल चित्र से करें
सबसे अच्छा विकल्प SVG है: यह ऊपर दिए हर आकार में बिना गुणवत्ता खोए बदलता है। वह न हो तो कम-से-कम 512×512 पिक्सेल का वर्गाकार PNG लें, ताकि Android की शुरुआती स्क्रीन का आइकन भी छोटा करके बने, बड़ा करके कभी नहीं।
टेक्स्ट वाला चौड़ा लोगो 16×16 में काम नहीं करता: इतने छोटे आकार में शब्द कुछ धुँधले पिक्सेल बन जाता है। चिह्न अलग निकालें या विपरीत रंग की पृष्ठभूमि पर एक या दो अक्षरों से शुरू करें।
अंत में लाइट और डार्क, दोनों पृष्ठभूमियों पर कंट्रास्ट जाँचें: काला लोगो डार्क थीम के टैब में गायब हो जाता है। SVG फ़ेविकॉन का डार्क संस्करण इसी के लिए है।
जिन आकारों की अब ज़रूरत नहीं है
पुराने जनरेटर अब भी पुराने एकीकरणों की फ़ाइलें बनाते हैं, जैसे mstile-150x150.png और browserconfig.xml वाले Windows टाइल। इन्हें केवल तभी जोड़ें जब आपकी समर्थन सूची में ये इंटरफ़ेस साफ़ तौर पर शामिल हों।
apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144 और 152x152 की लंबी सूची उस समय की है जब iOS आकार नहीं बदल सकता था। एक 180×180 चित्र इन सबकी जगह लेता है।
बिना उपयोग की घोषणाएँ हटाने से रिपॉज़िटरी और HTML सरल होते हैं। मौजूदा एकीकरण हटाने से पहले अपने लक्षित ब्राउज़र और प्लेटफ़ॉर्म जाँचें।
प्राथमिक स्रोत
अक्सर पूछे जाने वाले सवाल
क्या favicon.ico अब भी ज़रूरी है?
हाँ, लेकिन केवल साइट के रूट में। आधुनिक ब्राउज़र SVG पसंद करते हैं, फिर भी कई क्रॉलर, एग्रीगेटर और ईमेल क्लाइंट आपका HTML पढ़े बिना /favicon.ico माँगते हैं। फ़ाइल कुछ किलोबाइट की ही होती है: इसे रखें।
Google खोज परिणामों में किस आकार का फ़ेविकॉन इस्तेमाल करता है?
Google ऐसा आइकन माँगता है जिसकी भुजा 48 पिक्सेल का गुणज हो और आम तौर पर उसे 48×48 में दिखाता है। 96×96 PNG या SVG यह ज़रूरत आसानी से पूरी करता है। आइकन क्रॉल करने योग्य हो और robots.txt से अवरुद्ध न हो।
क्या मेरा फ़ेविकॉन आयताकार हो सकता है?
तकनीकी रूप से हाँ, दिखने के लिहाज़ से नहीं। हर जगह इसके लिए वर्गाकार स्थान होता है: आयताकार चित्र या तो विकृत होगा या खाली पट्टियों के साथ बीच में दिखेगा। हमेशा वर्ग से शुरू करें और ज़रूरत पर चिह्न के आसपास खाली जगह छोड़ें।