SVG बनाम ICO आइकन

SVG favicon एकल XML दस्तावेज़ हैं जो अतिरिक्त बाइट्स के बिना किसी भी टैब आकार में स्केल करते हैं। ICO फ़ाइलें बाइनरी कंटेनर हैं जिनमें एक या अधिक पूर्व-रास्टराइज़्ड फ़्रेम होते हैं।

आधुनिक Chromium, Firefox, और Safari SVG को टैब में प्रस्तुत कर सकते हैं। Windows शेल, पुराने एंबेड और अंतर्निहित /favicon.ico फ़ेच अभी भी रैस्टर ICO डेटा की अपेक्षा करते हैं।

प्रश्न SVG या ICO नहीं है - यह SVG प्लस ICO है, जिसमें SVG सक्षम ब्राउज़रों के लिए सूचीबद्ध है और ICO सुरक्षा जाल के रूप में सूचीबद्ध है।

Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.

एक फ़ाइल 16×16 से 256×256 लॉजिकल पिक्सल को कवर करती है। रखरखाव के लिए कोई मिमैप सेट नहीं है।

साधारण चिह्नों के लिए फ़ाइल का आकार अक्सर 2KB से कम होता है, जो छह-फ़्रेम .ico से कहीं छोटा होता है।

एंबेडेड CSS @मीडिया (prefers-color-scheme: डार्क) के तहत फिल को उल्टा कर सकता है, जिससे आपको अलग-अलग रात्रि संपत्तियों को निर्यात किए बिना अनुकूली टैब मिल सकते हैं।

SVG टेक्स्ट है. आप किसी अन्य स्रोत संपत्ति की तरह Git में favicon परिवर्तन भिन्न कर सकते हैं।

ब्राउज़र /favicon.ico का अनुरोध करते हैं, भले ही आप इसे HTML से हटा दें। उस अनुरोध को एक वैध आइकन कंटेनर लौटाना चाहिए, न कि SVG जिसका नाम बदलकर .ico कर दिया गया हो।

Windows पिन, आउटलुक लिंक खुलना, और कुछ RSS पाठक SVG को पूरी तरह से अनदेखा कर देते हैं। उम्मीद है कि लगभग 5% इंप्रेशन केवल ICO-पथ का उपयोग करेंगे।

ICO आपको पूर्वानुमानित पिक्सेल भी देता है। जटिल SVG फ़िल्टर सभी इंजनों में अलग-अलग तरीके से प्रस्तुत हो सकते हैं; रेखापुंज फ़ॉलबैक उपस्थिति को स्थिर करते हैं।

अधिकतम अनुकूलता के लिए पहले ICO घोषित करें, फिर संवर्द्धन के लिए SVG घोषित करें:

<लिंक rel='आइकन' href='/favicon.ico' आकार='कोई भी'>

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

जब प्रकार और MIME सही हों तो सक्षम ब्राउज़र SVG को प्राथमिकता देते हैं। अन्य टूटे हुए छवि ग्लिफ़ के बिना ICO पर वापस आ जाते हैं।

180×180 PNG ऐप्पल-टच-आइकन के साथ युग्मित करें क्योंकि iOS होम-स्क्रीन आइकन के लिए SVG का उपयोग नहीं करता है।

मोनोक्रोम लेटरमार्क: SVG एकल <पथ> और डार्क-मोड भरण स्वैप के साथ। Windows शॉर्टकट के लिए उसी आकार से ICO उत्पन्न हुआ।

ग्रेडिएंट लोगो: SVG के लिए सरलीकृत करें (केवल फ़्लैट फ़िल)। मार्केटिंग ग्रेडिएंट को वेबसाइट पर रखें, 16×16 टैब में नहीं।

विरासती IE आवश्यकताओं वाली सरकारी या उद्यम साइट: ICO को प्राथमिकता दें; एनालिटिक्स में नगण्य IE ट्रैफ़िक दिखाने के बाद ही SVG जोड़ें।

सख्त ब्रांड रंगों के साथ डिज़ाइन प्रणाली: SVG को रेपो में संग्रहीत करें, प्रत्येक रिलीज़ टैग पर .ico को पुन: उत्पन्न करने के लिए CI कार्य चलाएँ।

क्या मैं केवल SVG का उपयोग कर सकता हूँ? यदि आप Windows शॉर्टकट और अंतर्निहित .ico फ़ेच की परवाह करते हैं तो नहीं।

क्या Safari SVG favicons का समर्थन करता है? डेस्कटॉप पर Safari 15+ करता है। iOS होम स्क्रीन को अभी भी PNG की आवश्यकता है।

क्या SVG पहले पेंट को धीमा कर देगा? हीरो छवियों की तुलना में 1-2KB SVG नगण्य है।

क्या मैं SVG के अंदर एक बिटमैप एम्बेड कर सकता हूँ? आप कर सकते हैं, लेकिन आप स्केलेबिलिटी खो देते हैं - इसके बजाय ICO का उपयोग करें।

SVG favicon डार्क मोड में अदृश्य: भरण टैब पृष्ठभूमि से मेल खाता है। स्पष्ट भरण या prefers-color-scheme नियम जोड़ें।

Chrome ICO का उपयोग करता है, SVG का नहीं: प्रकार = "image/svg+xml" जांचें और सर्वर सत्यापित करें सामग्री-प्रकार छवि/svg+xml है।

SVG टेढ़ा-मेढ़ा दिखता है: आपने जटिल फ़िल्टर को व्यवस्थित किया है। पथों को सरल बनाएं या टैब के लिए ICO पर भरोसा करें।

विशाल SVG फ़ाइल: SVGO के साथ निर्यात करें; इलस्ट्रेटर मेटाडेटा और अप्रयुक्त डीईएफ़ हटाएं।

viewBox को वर्गाकार और केन्द्र में रखें। गैर-वर्ग viewBoxes लेटरबॉक्स आपके चिह्न को अप्रत्याशित रूप से गोलाकार या वर्गाकार टैब क्रॉप में प्रदर्शित करता है।

फ़िल्टर, मास्क और फ़ॉरेनऑब्जेक्ट एम्बेड के स्थान पर सरल भरण को प्राथमिकता दें। फ़ेविकॉन रेंडरिंग कॉन्टेक्स्ट स्ट्रिप पूर्ण-पृष्ठ SVG सुविधाओं की अनुमति देता है।

सभी शैलियों को इनलाइन करें. केवल favicon अनुरोधों के लिए बाहरी स्टाइलशीट लोड नहीं हो सकती हैं।

तैनात करने से पहले एक ही मशीन पर प्रकाश और अंधेरे दोनों ओएस सेटिंग्स में prefers-color-scheme नियमों का परीक्षण करें।

फ़ाइल का आकार छोटा करने के लिए रूढ़िवादी प्लगइन्स के साथ SVGO चलाएँ, लेकिन viewBox और महत्वपूर्ण पथ डेटा को बरकरार रखें।

संस्करण-नियंत्रण favicon.svg एप्लिकेशन कोड की तरह। भिन्न XML पुल अनुरोधों में बाइनरी ICO की तुलना करता है।

हीरो छवियों की तुलना में SVG पार्स लागत छोटी है, लेकिन इलस्ट्रेटर (100KB+) से विशाल SVG निर्यात अभी भी प्रत्येक टैब पर बाइट्स बर्बाद करता है।

ब्राउज़र favicon को HTML पर HTTP कैश-कंट्रोल से अलग से कैश करते हैं। favicon.svg का नाम बदलकर favicon-v2.svg करने से मार्केटिंग की मांग होने पर ताज़ा करने पर मजबूर होना पड़ता है।

HTML को कैश करने वाले सेवा कर्मियों को हमेशा के लिए बासी-जबकि-पुनर्वैधीकरण के साथ आइकन प्रतिक्रियाओं को कैश नहीं करना चाहिए - रीब्रांड पर कैश कुंजियों को टक्कर दें।

HTTP/2 मल्टीप्लेक्सिंग का मतलब है कि तीन छोटी आइकन फ़ाइलें वॉटरफॉल समस्या नहीं हैं। सही प्रारूप भेजें; SVG और ICO को एक फ़ाइल में मर्ज न करें।

फ़ेविकॉन टैब में सजावटी होते हैं - उन्हें HTML में ऑल्ट टेक्स्ट की आवश्यकता नहीं होती है। सार्थक साइट का नाम अभी भी <शीर्षक> में है।

कम कंट्रास्ट SVG अंक यूआई क्रोम के लिए WCAG में उसी तरह विफल होते हैं जैसे वे पृष्ठ सामग्री पर विफल होते हैं। #fff और #323232 पृष्ठभूमि दोनों पर कंट्रास्ट का परीक्षण करें।

केवल-रंग वाले ब्रांड चिह्न उपयोगकर्ताओं को रंग-दृष्टि की कमी से भ्रमित करते हैं। 16×16 सिल्हूट में न केवल रंग परिवर्तन, बल्कि एक विशिष्ट आकार जोड़ें।

favicon.svg को Git में स्टोर करें। रिलीज़ टैग पर, favicon.ico का उत्पादन करने के लिए एक हेडलेस स्क्रिप्ट या मैन्युअल जेनरेटर चरण चलाएँ और बायनेरिज़ प्रतिबद्ध करें या आर्टिफैक्ट तैनात करने के लिए संलग्न करें।

यदि favicon.ico, favicon.svg mtime से पुराना है तो विफल CI - लोगो ट्विक के बाद भूले हुए पुनर्जनन को पकड़ता है।

विलय से पहले 404 को पकड़ने के लिए पूर्वावलोकन परिवेश को उत्पादन के समान आइकन पथ का उपयोग करना चाहिए।

आपकी स्टाइल गाइड में दस्तावेज़: SVG स्रोत है, ICO जेनरेटेड आर्टिफैक्ट है, PNG आकार निर्यात लक्ष्य हैं।

न्यूनतम स्ट्रोक वजन और पैडिंग 16×16 पर निर्दिष्ट करें ताकि बाहरी एजेंसियां ​​ऑफ-ब्रांड मार्क न भेजें।

ब्रांड पीडीएफ में हल्के और गहरे रंग के स्क्रीनशॉट शामिल करें। मार्केटिंग टीमें अक्सर लेटरहेड की तरह टैब का भी संदर्भ देती हैं।

जब फीचर लॉन्च के साथ आइकन बदलते हैं तो उत्पाद रिलीज से मेल खाने वाले सेवर टैग के साथ संस्करण favicon संपत्तियां।

त्रैमासिक ऑडिट चलाएं: यदि एनालिटिक्स आपके दर्शकों में 98% से ऊपर SVG समर्थन दिखाता है, तब भी ICO बनाए रखें - एंटरप्राइज़ इंस्टॉल के लिए लंबी पूंछ मायने रखती है।

पहले favicon.ico तैनात करें और अंतर्निहित /favicon.ico अनुरोधों को सत्यापित करें 200 वापस करें।

स्टेजिंग पर सही MIME के ​​साथ favicon.svg जोड़ें; स्वचालित जाँच चलाएँ कि सामग्री-प्रकार छवि/svg+xml है।

उत्पादन के लिए भेजें, सीडीएन को शुद्ध करें, तीन ब्राउज़रों को हार्ड-रिफ्रेश करें, Chromium पर SVG टैब की पुष्टि करें और जहां अपेक्षित हो वहां ICO फ़ॉलबैक करें।

एक सप्ताह के लिए समर्थन टिकटों की निगरानी करें - यदि QA ने Windows शॉर्टकट को छोड़ दिया तो रीब्रांड के ठीक बाद आइकन क्लस्टर जारी करता है।

अपने रिलीज़ टिकट में बेसलाइन स्क्रीनशॉट रिकॉर्ड करें ताकि कोड समीक्षा के दौरान भविष्य में होने वाली गिरावट स्पष्ट हो।