Favicon format की तुलना: ICO बनाम PNG बनाम SVG
तीन formats, तीन काम। /favicon.ico path और पुराने clients के लिए .ico का उपयोग करें, आधुनिक browsers और हर app-icon size के लिए PNG, और एक साफ, theme-aware tab icon के लिए SVG।
हर format अलग काम करता है
कोई एक सर्वश्रेष्ठ favicon format नहीं है। हर एक ऐसा मामला संभालता है जिसे बाकी नहीं संभाल सकते। एक को चुनकर उसे हर जगह थोपना ही वह तरीका है जिससे tabs खाली हो जाते हैं और home screens एक ग्रे बॉक्स दिखाते हैं।
.ico format एक container है जो एक ही file में कई sizes रखता है। यह इसलिए मायने रखता है क्योंकि browsers और crawlers अब भी डिफ़ॉल्ट रूप से /favicon.ico माँगते हैं, और पुराने clients केवल .ico समझते हैं। एक असली .ico, extension बदले हुए PNG के समान नहीं है। किसी file का नाम बदलने से उसका नाम बदलता है, उसके bytes नहीं, और अधिकांश clients उसे अस्वीकार कर देंगे।
PNG असली मेहनती है। हर आधुनिक browser इसे पढ़ता है, और हर app-icon तथा manifest slot (16, 32, 180, 192, 512) एक PNG है। SVG नया आगमन है: एक एकल vector file जो किसी भी size पर तेज बनी रहती है और file के अंदर एक media query के साथ dark mode के लिए रंग बदल सकती है।
ICO बनाम PNG बनाम SVG
| Format | किसके लिए सबसे अच्छा | किससे सावधान रहें |
|---|---|---|
| .ico | /favicon.ico path और पुराने browsers या crawlers जो केवल .ico पढ़ते हैं | यह एक असली multi-size container (16 + 32 + 48) होना चाहिए, न कि नाम बदला हुआ PNG। इसे app icons के लिए उपयोग न करें। |
| PNG | आधुनिक browser tabs और हर app-icon तथा manifest size (16, 32, 180, 192, 512) | यह raster है, इसलिए हर size एक अलग file है। आपको फिर भी सभी sizes चाहिए, एक PNG उन सबको नहीं ढँकता। |
| SVG | एक एकल साफ tab icon जो किसी भी size तक scale होता है और dark mode के लिए रंग बदल सकता है | /favicon.ico पर यह मान्य नहीं है और iOS या Android home screens के लिए उपयोग नहीं होता। इसे सरल रखें, effects अलग-अलग browsers में भिन्न रूप से render हो सकते हैं। |
ये head में एक साथ कैसे बैठते हैं
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">जो browser SVG पढ़ता है वह favicon.svg का उपयोग करता है। बाकी सब PNGs और .ico पर वापस आ जाता है। apple-touch-icon PNG ही रहता है क्योंकि iOS यहाँ SVG को नज़रअंदाज़ करता है।
आम सवाल
क्या मैं बस एक PNG का नाम बदलकर favicon.ico कर सकता हूँ?
नहीं। .ico अपना ही container format है, अलग extension वाला PNG नहीं। कुछ browsers गलत लेबल वाली file सह लेते हैं, पर कई नहीं, और crawlers अधिक सख्त होते हैं। एक असली multi-size .ico बनाएँ।
अगर मेरे पास PNG और SVG हैं तो क्या मुझे फिर भी favicon.ico चाहिए?
हाँ, एक रखें। Browsers, feed readers और search crawlers बिना किसी tag के भी /favicon.ico माँगते हैं। उस path पर मौजूद एक file तब सुरक्षा जाल है जब आपके link tags छूट जाते हैं।
क्या SVG favicon, PNG से बेहतर है?
tab icon के लिए हो सकता है, क्योंकि एक file हर size पर तेज बनी रहती है और dark mode के अनुकूल हो सकती है। यह home screens के लिए PNG app icons की जगह नहीं लेता, इसलिए दोनों का उपयोग करें।
512x512 manifest icon के लिए मैं कौन-सा format उपयोग करूँ?
PNG। manifest icons array 192 और 512 पर raster PNGs की अपेक्षा करता है, जिसमें एक maskable भी शामिल है। SVG वह format नहीं है जिसे Android installed-app icons के लिए उपयोग करता है।