हर फ़ॉर्मैट किसलिए है
favicon एक फ़ाइल नहीं है। ब्राउज़र, ऑपरेटिंग सिस्टम और बुकमार्क टूल, हर कोई अलग फ़ाइल ढूंढता है, और HTML स्टैंडर्ड पेज को कई आइकन बताने देता है और चुनाव ब्राउज़र पर छोड़ देता है।
| फ़ाइल | फ़ॉर्मैट | किसके लिए |
|---|---|---|
favicon.ico |
ICO, एक फ़ाइल में कई बिटमैप | बैकअप: अगर कोई आइकन लिंक नहीं है, तो ब्राउज़र साइट के रूट पर /favicon.ico मांग सकते हैं। यह पैकेज इसमें 16, 32 और 48 px की इमेज रखता है। |
favicon.svg |
SVG | SVG favicon सपोर्ट करने वाले ब्राउज़र के लिए एक स्केल होने वाली फ़ाइल। इसमें लाइट और डार्क के अपने रंग हो सकते हैं। |
favicon-16x16.png, favicon-32x32.png |
PNG | टैब आइकन की रास्टर कॉपी, उस साइट बिल्डर या टूल के लिए जो PNG favicon मांगता है। |
apple-touch-icon.png |
PNG, 180 × 180 px | iPhone और iPad की होम स्क्रीन, जब कोई साइट को उस पर जोड़ता है। |
site.webmanifest |
JSON | इंस्टॉल हो सकने वाले वेब ऐप के लिए नाम, रंग और ऐप आइकन (देखें maskable आइकन वाली गाइड)। |
ICO सबसे पुराना फ़ॉर्मैट है और आज भी सबसे ज़्यादा पढ़ा जाता है। HTML स्टैंडर्ड /favicon.ico की रिक्वेस्ट को ऐसी चीज़ बताता है जो ब्राउज़र तब कर सकता है जब पेज कोई आइकन न बताए, इसलिए इसे सेफ़्टी नेट समझें और फिर भी इसे साफ़-साफ़ लिंक करें। MDN बताता है कि एक ICO फ़ाइल में कई साइज़ रखे जा सकते हैं, इसीलिए एक ही फ़ाइल 16, 32 और 48 px को कवर कर लेती है।
SVG इकलौता फ़ॉर्मैट है जो हर साइज़ और हर पिक्सेल डेंसिटी पर शार्प रहता है। SVG के अंदर का <style> ब्लॉक prefers-color-scheme से रंग बदल सकता है, ताकि गहरे रंग का मार्क डार्क टैब बार पर भी दिखता रहे। सर्वर को इसे image/svg+xml के रूप में भेजना होगा: Can I use के मुताबिक Chromium ब्राउज़र और Firefox को यही टाइप चाहिए।
PNG favicon सादे बिटमैप होते हैं, जिन्हें आमतौर पर sizes एट्रिब्यूट के साथ लिंक किया जाता है। स्टैंडर्ड sizes को सिर्फ़ सलाह बताता है: ब्राउज़र इससे सबसे नज़दीकी फ़ाइल चुन सकता है, पर ऐसा करना ज़रूरी नहीं। इसका असर दोनों तरफ़ होता है, जैसा अगला सेक्शन दिखाता है।
कौन-सा ब्राउज़र क्या इस्तेमाल करता है
SVG favicon का सपोर्ट, Can I use के डेटा के मुताबिक, जैसा 28 सितंबर 2026 को देखा गया: Chrome और Edge वर्ज़न 80 से, Firefox 41 से, Opera 67 से, और Safari 26.0 से, macOS और iOS दोनों पर। Safari 18 और उससे पुराने वर्ज़न SVG favicon इस्तेमाल नहीं करते, इसलिए वे PNG और ICO फ़ाइलों पर निर्भर रहते हैं। WebKit टीम ने यह बदलाव सितंबर 2025 में Safari 26.0 के रिलीज़ पोस्ट में बताया था। जो लोग अब भी पुराने Safari पर हैं, उन्हें रास्टर आइकन ही दिखते हैं, इसीलिए SVG favicon उनकी जगह कभी नहीं लेता।
जब कोई पेज कई आइकन बताता है, तो HTML स्टैंडर्ड कहता है कि ब्राउज़र वह चुनता है जो उसके लिए सबसे सही हो, और अगर कई बराबर सही हों तो सबसे आखिर में बताया गया जीतता है। अगर कोई फ़ाइल काम की न निकले, जैसे ऐसा फ़ॉर्मैट जो वह पढ़ नहीं सकता, तो वह अगली पर चला जाता है। “सबसे सही” का फ़ैसला ब्राउज़र पर छोड़ा गया है: जो ब्राउज़र बताए गए साइज़ से चुनता है, वह बिना साइज़ वाले SVG की जगह sizes="32x32" वाला PNG पसंद कर सकता है, क्रम चाहे जो हो। इसलिए नीचे के स्निपेट में साइज़ वाला कोई PNG लिंक ही नहीं है: रास्टर साइज़ ICO संभालता है, और SVG उसके बाद आता है।
एक बात किसी ब्राउज़र कंपनी से नहीं, बल्कि प्रैक्टिस से आती है। Evil Martians का favicon लेख ICO लिंक पर sizes="32x32" लगाने की सलाह देता है, “Chrome के उस बग को ठीक करने के लिए जिसमें वह SVG की जगह ICO फ़ाइल चुन लेता है”; उसका चेंजलॉग बताता है कि जुलाई 2023 में इसी वजह से sizes="any" को बदला गया। लेख किसी Chromium बग रिपोर्ट का लिंक नहीं देता, और हमें भी कोई नहीं मिली, इसलिए इसे मैदानी अनुभव समझें। जेनरेटर यही सलाह मानता है। इससे कोई नुकसान नहीं होता, क्योंकि ICO में सच में 32 px की इमेज होती है।
Apple touch आइकन। Apple की आर्काइव की गई Safari Web Content Guide <link rel="apple-touch-icon"> के बारे में बताती है और Retina iPhone के लिए 180 × 180 px लिखती है। MDN जोड़ता है कि iOS होम स्क्रीन आइकन के लिए सामान्य rel="icon" लिंक इस्तेमाल नहीं करता। Apple के डॉक्यूमेंटेशन में यह नहीं लिखा कि ट्रांसपेरेंट पिक्सेल का क्या होता है; Apple के डेवलपर फ़ोरम पर एक जवाब (किसी दूसरे डेवलपर का, Apple का नहीं) कहता है कि वे काले दिखते हैं। इसलिए जेनरेटर यह फ़ाइल हमेशा आपके चुने बैकग्राउंड रंग पर, बिना ट्रांसपेरेंसी के बनाता है।
थीम कलर सबसे कम भरोसेमंद हिस्सा है। Can I use के मुताबिक Firefox में <meta name="theme-color"> का कोई सपोर्ट नहीं है, और डेस्कटॉप Chrome यह रंग सिर्फ़ इंस्टॉल किए गए वेब ऐप के लिए इस्तेमाल करता है। Can I use और MDN दोनों कहते हैं कि Safari 26 से यह सिर्फ़ इंस्टॉल किए गए वेब ऐप पर लागू होता है। Android पर Chrome और iOS 26 पर Safari की डिटेल में दोनों सोर्स अलग-अलग बात कहते हैं। टैग रखें, लेकिन डिज़ाइन उस पर टिका न हो।
Safari के पिन किए गए टैब के लिए Apple का पुराना mask-icon लिंक अब भी उसके आर्काइव डॉक्यूमेंटेशन में दिखता है। हमें कोई आधिकारिक नोट नहीं मिला जो इसे बंद करता हो, और न ही कुछ ऐसा जो इसे ज़रूरी बताता हो। यह पैकेज इसे शामिल नहीं करता।
कौन-सी फ़ाइलें काफ़ी हैं
वेक्टर आर्टवर्क वाली साइट के लिए favicon.ico, favicon.svg और apple-touch-icon.png लिंक करें, और अगर साइट इंस्टॉल होनी चाहिए तो 192 और 512 px आइकन वाला मैनिफ़ेस्ट भी। Evil Martians का लेख भी इसी सेट पर पहुंचता है। PNG favicon सर्वर पर रखे रह सकते हैं, उन टूल के लिए जो इन्हें मांगते हैं, बिना लिंक टैग के। जिस साइट का लोगो सिर्फ़ बिटमैप के रूप में है, वहां SVG छोड़ दें: SVG फ़ाइल में लपेटा गया PNG अब भी बिटमैप ही है और उससे कुछ फ़ायदा नहीं होता। अगर SVG favicon चाहिए, तो पहले उसे ट्रेस करके असली वेक्टर पाथ बनाएं।
HTML स्निपेट
नीचे दिए उदाहरण पैकेज के लिए जेनरेटर favicon.html में यही टैग लिखता है, जब फ़ाइलें साइट के रूट पर हों:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0a2d8f">
अगर आपकी फ़ाइलें /assets/icons/ जैसे किसी फ़ोल्डर में हैं, तो favicon जेनरेटर में वही फ़ोल्डर पाथ प्रीफ़िक्स के रूप में दें, और हर href उसके साथ बदल जाएगा; favicon.ico को साइट के रूट पर भी कॉपी करें, क्योंकि जो पेज कोई आइकन लिंक नहीं करते, उनके लिए ब्राउज़र उसे वहीं ढूंढते हैं। PNG, JPG या WebP सोर्स से यही टैग बनते हैं, बस SVG वाली लाइन नहीं होती।
डाउनलोड करने लायक एक असली उदाहरण
हमने इस साइट का अपना मार्क (कमिट किया हुआ SVG, किसी का अपलोड नहीं) favicon जेनरेटर में चलाया, नाम “png2svg.art”, थीम कलर #0a2d8f, बैकग्राउंड #e8efff और 8 % पैडिंग के साथ। बाद में कुछ भी एडिट नहीं किया गया: टूल ठीक यही फ़ाइलें बनाता है।
32 px का favicon, असली साइज़ में: 
180 px का Apple touch आइकन, बैकग्राउंड रंग पर बिना ट्रांसपेरेंसी के:
पूरा उदाहरण पैकेज डाउनलोड करें (ZIP): favicon.svg, favicon.ico, दोनों PNG favicon, Apple touch आइकन, चार ऐप आइकन, site.webmanifest, favicon.html और एक README।
अपने favicon जांचें
अपलोड करने के बाद पेज को प्राइवेट विंडो में खोलें: ब्राउज़र favicon को लंबे समय तक कैश में रखते हैं, और सामान्य विंडो में दिखा पुराना आइकन कुछ साबित नहीं करता। डेवलपर टूल के नेटवर्क पैनल में पक्का करें कि favicon.svg, image/svg+xml के रूप में भेजा जा रहा है और हर फ़ाइल 200 जवाब देती है। टैब को लाइट और डार्क मोड में देखें, और touch आइकन जांचने के लिए पेज को फ़ोन की होम स्क्रीन पर जोड़ें।