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 वैकल्पिक है, और ज़्यादातर साइटें इनमें से एक भी नहीं भेजतीं।
एक से ज़्यादा 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 आइकन आता है।
मुख्य favicon sizes
| Size | किसके लिए | प्राथमिकता |
|---|---|---|
| 16x16 | Address bar, पुराने browsers, bookmarks | ज़रूरी |
| 32x32 | Browser tabs, आधुनिक browsers | ज़रूरी |
| 96x96 | Desktop shortcuts, Windows tiles | वैकल्पिक |
| 192x192 | Android home screen, PWA icons | ज़रूरी |
| 512x512 | Splash screens, high-res icons | ज़रूरी |
वे संख्याएँ दिखती कैसी हैं
Apple touch icon sizes
| Size | Device |
|---|---|
| 57x57 | iPhone (non-retina) |
| 60x60 | iPhone (retina) |
| 72x72 | iPad (non-retina) |
| 76x76 | iPad (retina) |
| 114x114 | iPhone (retina) |
| 120x120 | iPhone (retina HD) |
| 144x144 | iPad (retina) |
| 152x152 | iPad (retina HD) |
| 180x180 | iPhone (retina HD) प्राथमिक |
फ़ाइलें कहाँ जाती हैं
- 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 आइकन से कम महँगा है।