फ़ेविकॉन (.ico) बनाम SVG

SVG एक वेक्टर प्रारूप है, जिसका अर्थ है कि एक एकल SVG फ़ेविकॉन किसी भी पिक्सेल घनत्व पर बिना किसी गिरावट के प्रस्तुत करता है। 1x डिस्प्ले पर यह 16×16 पिक्सेल पर प्रस्तुत होता है; 3x रेटिना डिस्प्ले पर यह उसी फ़ाइल से 48×48 भौतिक पिक्सेल पर प्रस्तुत होता है। 4 आकार-विशिष्ट रैस्टर फ्रेम वाला कोई भी ICO बंडल इस स्वचालित घनत्व हैंडलिंग से मेल नहीं खा सकता है। SVG आधुनिक उच्च-डीपीआई डिस्प्ले के लिए आदर्श प्रारूप है।

.ico प्रारूप सार्वभौमिक आधार रेखा बना हुआ है। प्रत्येक डेस्कटॉप ब्राउज़र, मोबाइल ब्राउज़र, ऑपरेटिंग सिस्टम और वेब आइकन से संबंधित तृतीय-पक्ष टूल ने 1990 के दशक के उत्तरार्ध से favicon.ico का समर्थन किया है। इनमें से कई वातावरण HTML लिंक टैग की बिल्कुल भी जांच नहीं करते हैं - वे बस एक कन्वेंशन के रूप में डोमेन रूट से /favicon.ico लाने का प्रयास करते हैं। अपने सेटअप से .ico को हटाने से उपयोगकर्ताओं और टूल के एक सार्थक खंड के फ़ेविकॉन तुरंत टूट जाते हैं।

डार्क-मोड समर्थन SVG फ़ेविकॉन की शानदार विशेषता है। एक SVG फ़ाइल एक `<style>` ब्लॉक को `@media (prefers-color-scheme: dark)` क्वेरी के साथ एम्बेड कर सकती है। जब ब्राउज़र डार्क मोड में होता है, तो क्वेरी सक्रिय हो जाती है और आइकन का भरण, स्ट्रोक या पृष्ठभूमि रंग बदल सकती है। .ico या PNG के साथ यह असंभव है - वे प्रारूप पर्यावरण संबंधी जागरूकता के बिना स्थिर रेखापुंज हैं।

SVG फ़ेविकॉन के लिए ब्राउज़र समर्थन काफी परिपक्व हो गया है। Chrome 80+ (रिलीज़ 2020), Edge 80+, Firefox 41+, और Safari 15+ (रिलीज़ 2021) सभी `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>` को सपोर्ट करते हैं। 2026 तक, अधिकांश सक्रिय ब्राउज़र इंस्टॉल SVG फ़ेविकॉन का समर्थन करते हैं। पुराने iOS उपकरणों पर उल्लेखनीय अपवाद पुराना Safari (प्री-15) है - ये स्वचालित रूप से .ico पर वापस आ जाते हैं।

फ़ाइल का आकार एक और SVG लाभ है। एक साधारण चिह्न के लिए एक साफ मोनोक्रोम SVG फ़ेविकॉन आमतौर पर 1 KB से कम का होता है। अच्छी गुणवत्ता पर 16, 32, 48 और 64 px रैस्टर फ़्रेमों को बंडल करने वाली एक .ico फ़ाइल आमतौर पर 10-25 KB होती है। बहुत तेज़ लोड-समय आवश्यकताओं वाली साइटों के लिए, स्टैंडअलोन PNG सेट के बजाय SVG फ़ेविकॉन शिपिंग करने से फ़ेविकॉन पेलोड काफी कम हो जाता है - हालाँकि पहले लोड के बाद कोई भी प्रारूप कैश हो जाता है।

SVG फ़ेविकॉन लिंकिंग सिंटैक्स .ico से थोड़ा अलग है। आपको एक स्पष्ट प्रकार विशेषता की आवश्यकता है: `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>`। प्रकार विशेषता के बिना, कुछ ब्राउज़र फ़ाइल को फ़ेविकॉन के रूप में नहीं पहचानते हैं। इसे पहले .ico फ़ॉलबैक लिंक टैग के साथ जोड़ें: `<link rel='icon' href='/favicon.ico'>`। जो ब्राउज़र SVG फ़ेविकॉन समझते हैं वे अधिक विशिष्ट SVG टैग पसंद करते हैं; अन्य लोग .ico के माध्यम से आते हैं।

फ़ेविकॉन तैनात करने से पहले SVG अनुकूलन करना उचित है। डिज़ाइन टूल संपादक मेटाडेटा, टिप्पणियों, अदृश्य पथों और अनावश्यक विशेषताओं के साथ SVG निर्यात करते हैं जो बिना किसी दृश्य योगदान के बाइट्स जोड़ते हैं। अपने SVG को SVG optimizer के माध्यम से चलाने से आइकन को दृश्यमान रूप से समान रखते हुए फ़ाइल का आकार 50-80% तक कम हो सकता है। छोटे SVG भी तेजी से पार्स करते हैं, जो धीमे कनेक्शन पर मायने रखता है।

.ico प्रारूप Windows OS एकीकरण को संभालता है जिसे SVG नहीं संभाल सकता। ब्राउज़र टैब, टास्कबार पिन और Windows फ़ाइल एक्सप्लोरर आइकन से बनाए गए डेस्कटॉप शॉर्टकट सभी /favicon.ico पढ़ते हैं। इन संदर्भों में SVG एक मान्यता प्राप्त Windows आइकन प्रारूप नहीं है। यहां तक ​​कि जो उपयोगकर्ता मुख्य रूप से अपने ब्राउज़र टैब में SVG फ़ेविकॉन देखते हैं, वे आपकी साइट पर Windows शॉर्टकट बनाते समय .ico संस्करण देखेंगे।

SVG फ़ाइल के अंदर `<animate>` तत्वों या SMIL एनिमेशन का उपयोग करके SVG के साथ फ़ेविकॉन को एनिमेट करना संभव है। एक एनिमेटेड SVG फ़ेविकॉन पल्स, स्पिन या रंग बदल सकता है। फ़ेविकॉन में SVG एनीमेशन के लिए ब्राउज़र समर्थन सीमित है (Chrome और Edge इसका समर्थन करते हैं; Firefox और Safari नहीं करते हैं), लेकिन यह उन वेब ऐप्स के लिए एक रचनात्मक विकल्प है जो फ़ेविकॉन के माध्यम से स्थिति परिवर्तन (उदाहरण के लिए, लोडिंग संकेतक, नए अधिसूचना बिंदु) दिखाना चाहते हैं।

SVG फ़ेविकॉन साधारण डार्क/लाइट स्विचिंग से परे उन्नत रंग मोड का समर्थन करते हैं। आप SVG के अंदर CSS कस्टम गुणों का उपयोग कर सकते हैं, उच्च-कंट्रास्ट मोड के लिए `forced-colors` मीडिया प्रश्नों का जवाब दे सकते हैं, और कई रंग-योजना ब्रेकप्वाइंट का उपयोग कर सकते हैं। थीम का यह स्तर रास्टर प्रारूपों के साथ असंभव है और SVG को एक्सेसिबिलिटी-केंद्रित डिज़ाइन सिस्टम के लिए सबसे अच्छा विकल्प बनाता है।

उत्पादन में SVG की व्यावहारिक सीमा यह है कि आपको अभी भी गैर-SVG फ़ॉलबैक की आवश्यकता है। सबसे सरल तरीका यह है कि SVG को अपने प्राथमिक आइकन के रूप में बनाए रखें और उसी SVG स्रोत से .ico और apple-touch-icon PNG उत्पन्न करें। favicon generator स्रोत प्रारूप के रूप में SVG को स्वीकार करता है और वेक्टर डेटा से .ico और PNG आउटपुट उत्पन्न करता है - रैस्टराइजेशन से कोई गुणवत्ता हानि नहीं होती है।

सोशल मीडिया शेयर कार्ड, ओजी इमेज और लिंक खोलने के लिए, फ़ेविकॉन स्रोत प्रारूप अप्रासंगिक है - सोशल प्लेटफ़ॉर्म आपके HTML या /favicon.ico से फ़ेविकॉन लाते हैं और इसे आंतरिक रूप से परिवर्तित करते हैं। चाहे आपका फ़ेविकॉन .ico, PNG, या SVG हो, खुला हुआ लिंक कार्ड आइकन प्रदर्शित करेगा। सामाजिक साझाकरण परिदृश्यों के प्रारूप के बजाय आइकन सामग्री की गुणवत्ता पर ध्यान दें।

अनुशंसित ico+SVG सेटअप को लागू करने में केवल तीन लिंक टैग शामिल हैं: `.ico` फ़ॉलबैक, `image/svg+xml` SVG, और `apple-touch-icon` PNG। ब्राउज़र उन्हें विशिष्टता के क्रम में पढ़ते हैं - सबसे विशिष्ट प्रारूप पहले - और सबसे पहले वह चुनें जिसका वे समर्थन करते हैं। इस प्रगतिशील वृद्धि दृष्टिकोण का मतलब है कि प्रत्येक उपयोगकर्ता को सबसे अच्छा फ़ेविकॉन मिलता है जिसे उनका ब्राउज़र संभाल सकता है। संपूर्ण निर्णय मैट्रिक्स के लिए best favicon format guide देखें।