Favicon Sizes: हर वह dimension जो असल में चाहिए
जो favicon sizes आपको चाहिए वे हैं: browser tab और bookmark के लिए 16x16 और 32x32 PNG, iOS के apple-touch-icon के लिए 180x180, और Android home screen तथा PWA install के लिए 192x192 और 512x512 PNG। एक favicon.ico जिसमें 16, 32 और 48 pixel की entries हों, वह हर उस चीज़ को कवर करता है जो सीधे /favicon.ico माँगती है। बाक़ी हर size वैकल्पिक है, और ज़्यादातर साइटें इनमें से एक भी नहीं भेजतीं।
वे sizes जो आपको सच में चाहिए
| Size | किसके लिए इस्तेमाल | रखें? |
|---|---|---|
| 16, 32, 48 | browser tab और bookmarks, favicon.ico के अंदर बंडल | रखें |
| 180x180 | iOS home screen के लिए apple-touch-icon | रखें |
| 192x192 | Android launcher icon, manifest में सूचीबद्ध | रखें |
| 512x512 | PWA splash और install prompt, manifest में सूचीबद्ध | रखें |
| SVG | किसी भी size पर तीखा tab icon, dark mode के अनुसार ढल सकता है | वैकल्पिक |
एक से ज़्यादा size क्यों
एक browser tab लगभग 16 से 32 pixel चौड़ा आइकन माँगता है। Android home screen 192 माँगती है। PWA splash screen 512 माँगती है। ये एक ही तस्वीर के स्केल किए हुए रूप नहीं हैं। 16 pixel पर एक mark के पास काम करने के लिए क़रीब 256 pixel होते हैं, और वहाँ जो टिका रहे उसे 512 पर सही दिखने वाली चीज़ से कहीं ज़्यादा सरल होना पड़ता है।
जब आप कई sizes घोषित करते हैं, तो browser सबसे नज़दीकी मैच चुनता है और वहीं से स्केल करता है। सिर्फ़ एक बड़ा आइकन घोषित करने का मतलब है कि हर छोटा surface उसे downsample करता है — यहीं से tab वाला धूसर धब्बा आता है। सिर्फ़ एक छोटा घोषित करने का मतलब है कि हर बड़ा surface उसे upscale करता है — यहीं से धुँधला home screen आइकन आता है।
वे संख्याएँ दिखती कैसी हैं
वे sizes जिन्हें ship करना बंद करें
| Size | किसके लिए था | रखें? |
|---|---|---|
| 57, 60, 72, 76 | iOS 6 और पुराने iPads के लिए apple-touch-icon | हटाएं |
| 114, 120, 144, 152 | पुराने iPhones और iPads के लिए Retina apple-touch-icon | हटाएं |
| 70, 150, 310 | browserconfig.xml के ज़रिए Windows tile icons | हटाएं |
| 160, 196 | विविध पुराने Android और Chrome shortcut sizes | हटाएं |
फ़ाइलें कहाँ जाती हैं
- public/
- favicon.ico16, 32 and 48 in one file
- favicon-16x16.pngAddress bar
- favicon-32x32.pngBrowser tabs
- favicon-96x96.pngDesktop shortcuts
- apple-touch-icon.png180x180, iOS home screen
- icon-192.pngAndroid home screen
- icon-512.pngPWA splash screen
- manifest.jsonLists the PWA icons
इन्हें flat रूप में public root में रखना ही प्रचलन है, क्योंकि इनमें से कई path के ज़रिए भी माँगी जाती हैं, बिना किसी link tag के।
Favicon size FAQ
favicon sizes का न्यूनतम सेट क्या है?
एक favicon.ico जिसमें 16 और 32 हों, एक 180x180 apple-touch-icon.png, और आपके web app manifest में सूचीबद्ध 192x192 तथा 512x512 PNG। यह पाँच फ़ाइलों में desktop browsers, iOS home screens, Android और PWA install को कवर कर लेता है।
क्या iOS के लिए मुझे अब भी 57x57 और 72x72 चाहिए?
सिर्फ़ तभी जब आप बहुत पुराने iPhone और iPad को सपोर्ट करते हों। मौजूदा iOS 180x180 apple-touch-icon का इस्तेमाल करता है और जहाँ छोटा चाहिए वहाँ उसे नीचे स्केल कर लेता है, इसलिए लगभग हर साइट के लिए अकेला 180 काफ़ी है।
क्या बड़ा favicon page को धीमा करता है?
कोई ख़ास नहीं। आइकन छोटे PNG होते हैं जो कुछ ही किलोबाइट के होते हैं और browser सिर्फ़ ज़रूरत का size माँगते हैं, साथ ही इन्हें आक्रामक रूप से cache किया जाता है। एक ऐसा 512 भेजना जो आप कभी इस्तेमाल नहीं करते, एक धुँधले home screen आइकन से कम महँगा है।
क्या मुझे Windows tile icons ship करने चाहिए?
नहीं। 70, 150 और 310 tile sizes और browserconfig.xml Windows live tiles को लक्षित करते थे, जो सेवानिवृत्त हो चुके हैं। इन्हें हटा दें।
क्या एक favicon.ico एक से ज़्यादा size रख सकता है?
हां। .ico फ़ॉर्मैट एक container है जो एक ही फ़ाइल में 16, 32 और 48 रखता है। browser उसके अंदर से जिस size की ज़रूरत हो उसे चुन लेता है।