ICO बनाम PNG Favicon: कौन-सा format इस्तेमाल करें?
PNG को अपने प्राथमिक favicon के रूप में इस्तेमाल करें और साइट root पर एक favicon.ico को fallback के तौर पर रखें। PNG आपको पूरा 24-bit colour और एक असली alpha channel देता है, यह बेहतर compress होता है, और हर मौजूदा browser इसे link tag से स्वीकार करता है; ICO का बचा हुआ फ़ायदा यह है कि यह कई sizes को एक फ़ाइल में समेट लेता है और जब कोई tag न हो तो clients /favicon.ico से यही माँगते हैं। दोनों भेजने पर सिर्फ़ एक अतिरिक्त फ़ाइल का ख़र्च आता है और यह trade-off पूरी तरह ख़त्म हो जाता है।
दोनों formats
ICO Windows का icon container है, और यह favicon format संयोग से बना: Internet Explorer ने /favicon.ico माँगा और सबने एक भेज दिया। इसकी सबसे बड़ी ख़ासियत यह है कि एक अकेली .ico फ़ाइल अलग-अलग sizes के कई bitmaps रखती है, और उपभोक्ता एक चुन लेता है।
PNG एक सामान्य web image format है जिसमें lossless compression और पूरा alpha channel होता है। यह एक size पर ठीक एक image रखता है, इसलिए कई sizes कवर करने का मतलब है कई फ़ाइलें और कई link tags — जो आधुनिक browsers वैसे भी उम्मीद करते हैं।
किसे चुनें
ICO
Fallback और सीधे-path वाली requests
- एक फ़ाइल 16, 32 और 48 pixel के bitmaps साथ रखती है
- Browsers, crawlers और feed readers द्वारा /favicon.ico से माँगी जाती है, बिना किसी link tag के
- अब तक बने हर browser द्वारा समझी जाती है, बहुत पुराने वालों समेत
- Windows desktop shortcuts के लिए native format
- बनाना और जाँचना असुविधाजनक; अधिकांश tooling इसे build artefact मानते हैं
PNG
Start hereआपका प्राथमिक favicon
- 24-bit colour, इसलिए gradients और photographic marks टिके रहते हैं
- पूरा alpha channel, इसलिए किसी भी tab colour के सामने किनारे साफ़ anti-alias होते हैं
- समान गुणवत्ता पर बराबर की ICO से छोटा
- हर मौजूदा browser में link rel="icon" के ज़रिए समर्थित
- यही format Android और PWA manifests install icons के लिए अपेक्षा करते हैं
तकनीकी तुलना
| गुण | ICO | PNG |
|---|---|---|
| Colour depth | क्लासिक फ़ाइलों में 8-bit palette; आधुनिक में 32-bit | 24-bit colour साथ में 8-bit alpha |
| Transparency | क्लासिक फ़ाइलों में 1-bit mask; 32-bit entries में alpha channel | पूरा alpha channel |
| प्रति फ़ाइल sizes | कई, आमतौर पर 16, 32 और 48 | एक |
| Compression | बिना compress bitmaps, या PNG-compressed entries | Lossless DEFLATE |
| बिना link tag के माँगी जाती है | हाँ, /favicon.ico पर | नहीं |
head में क्या रखें
<!-- PNG first: modern browsers pick these -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- ICO fallback; also served from /favicon.ico for bare requests -->
<link rel="icon" href="/favicon.ico" sizes="any">दोनों घोषित करना टकराव नहीं है। Browser हर icon link पढ़ता है, type और size पर मैच करता है, और ICO का उपयोग सिर्फ़ तभी करता है जब वह उसे प्राथमिकता दे या PNG विफल हो जाएँ।
ICO बनाम PNG FAQ
क्या मैं favicon.ico पूरी तरह हटा सकता हूँ?
हटा सकते हैं, और जब तक आपके PNG link tags मौजूद हैं तब तक आधुनिक browsers ठीक रहेंगे। जो टूटता है वह हर वह चीज़ है जो आपके HTML को parse किए बिना /favicon.ico को path से माँगती है (crawlers, feed readers, link-preview bots, कुछ analytics), जो एक 404 लॉग करेगी और कुछ नहीं दिखाएगी।
अगर मैं दोनों घोषित करूँ तो कौन जीतता है?
Browser तय करता है, हर link पर type और sizes attributes का उपयोग करके। असल में मौजूदा browsers उस PNG को लेते हैं जो उनकी ज़रूरत के size से सबसे अच्छा मैच करे, और अगर कुछ और मैच न हो तो ICO पर fall back करते हैं।
क्या ICO PNG से घटिया गुणवत्ता का है?
स्वाभाविक रूप से नहीं। एक 32-bit ICO entry उतना ही colour और alpha रखती है जितना एक PNG, और कई ICO फ़ाइलें असल में PNG data ही embed करती हैं। गुणवत्ता की शिकायतें 1-bit transparency वाली पुरानी 8-bit palette ICO से आती हैं, जो कठोर दाँतेदार किनारे बनाती हैं।