SVG Favicons: कब इसका इस्तेमाल करें, और वह ICO जो आपको अब भी चाहिए
एक अकेला SVG आधुनिक browsers पर आपका सबसे साफ़ favicon हो सकता है, और यह एक ही फ़ाइल से dark mode के लिए पलट सकता है। यह बस आपका इकलौता आइकन नहीं हो सकता, तो यहाँ बताया गया है कि यह कहाँ फ़िट होता है और यह .ico और PNGs के लिए क्या छोड़ता है।
SVG favicon क्या अच्छा करता है
एक favicon सतहों पर बहुत अलग-अलग आकारों में बनाया जाता है, और एक अकेला SVG उन सभी को एक ही फ़ाइल से कवर करता है। यह किसी भी डिस्प्ले पर साफ़ रहता है क्योंकि यह वेक्टर है, पिक्सेलों का एक निश्चित ग्रिड नहीं, इसलिए न कोई धुँधली अपस्केलिंग है और न ही सिंक में रखने के लिए अलग-अलग 16, 32 और 48 पिक्सेल exports।
इसमें एक और तरकीब है जिसकी बराबरी एक raster आइकन नहीं कर सकता: SVG के अंदर एक prefers-color-scheme media query वही फ़ाइल को तब खुद को फिर से रंगने देती है जब operating system dark mode पर स्विच करता है, इसलिए एक दूसरी image भेजे बिना ही चिन्ह गहरे tab strip के सामने पठनीय रहता है।
इसे लिंक करना, fallbacks के साथ
<link rel="icon" type="image/svg+xml" href="/icon.svg">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">जो browser SVG को समझता है वह पहली पंक्ति को प्राथमिकता देता है। बाकी सब उन सतहों के लिए है जो नहीं समझतीं।
SVG कहाँ काम करता है, और कहाँ नहीं
| सतह | SVG इस्तेमाल करता है? |
|---|---|
| आधुनिक browser tabs | हाँ, और यह वहीं सबसे अच्छा दिखता है |
| पुराने browsers | नहीं, वे .ico या PNG पर लौट जाते हैं |
| /favicon.ico path | नहीं, उस अनुरोध को एक असली .ico चाहिए |
| iOS होम स्क्रीन | नहीं, यह apple-touch-icon PNG इस्तेमाल करती है |
| Android और PWA इंस्टॉल | नहीं, यह manifest से PNG आइकन पढ़ती है |
SVG को dark mode के अनुकूल बनाना
SVG की अपनी शैलियों में एक prefers-color-scheme media query रखें और OS theme बदलने पर इसे fill रंग बदलने दें। एक अकेली फ़ाइल फिर हल्के और गहरे दोनों browser chrome पर सही पढ़ी जाती है, जो एक theme-aware favicon को संभालने का सबसे सुंदर तरीका है।
अगर आप media query बनाए रखना नहीं चाहते, तो किसी भी बैकग्राउंड पर टिके रहने के लिए पर्याप्त कंट्रास्ट वाला एक अकेला मध्यम-टोन चिन्ह उसी लक्ष्य तक पहुँचने का सरल रास्ता है।
अक्सर पूछे जाने वाले प्रश्न
क्या मुझे SVG favicon इस्तेमाल करना चाहिए?
Browser tab के लिए, हाँ: यह एक ही फ़ाइल है, बिल्कुल सही स्केल होती है, और dark mode के अनुकूल हो सकती है। बस इसे एक favicon.ico और PNG app icons के साथ मिलाएँ ताकि जो सतहें SVG नहीं पढ़तीं वे भी कवर रहें।
क्या सभी browsers SVG favicons का समर्थन करते हैं?
अधिकांश आधुनिक browsers करते हैं, पर सभी नहीं, और कोई भी होम-स्क्रीन सतह इसका इस्तेमाल नहीं करती। इसीलिए आप केवल SVG पर निर्भर रहने के बजाय एक .ico और PNGs को fallbacks के रूप में रखते हैं।
अगर मेरे पास SVG है तो क्या मुझे अब भी favicon.ico चाहिए?
हाँ। Browsers, crawlers और feed readers अब भी /favicon.ico को path से माँगते हैं, और उस अनुरोध का जवाब SVG से नहीं दिया जा सकता। साइट root पर एक असली .ico रखें।
क्या एक SVG favicon dark mode कर सकता है?
हाँ, यह इसके फ़ायदों में से एक है। SVG के अंदर एक prefers-color-scheme media query इसे तब फिर से रंगती है जब OS theme बदलता है, इसलिए एक अकेली फ़ाइल हल्के और गहरे दोनों browser chrome पर काम करती है।