SVG Favicon: Support, Dark Mode और Fallbacks
SVG favicon एक vector आइकन है जिसे image/svg+xml type के link tag से रेफ़र किया जाता है, ताकि हर size के लिए एक PNG के बजाय एक ही फ़ाइल किसी भी size पर तीखी रेंडर हो। चूँकि यह एक document है, यह एक prefers-color-scheme media query रख सकता है और dark mode में ख़ुद को अलग तरह बना सकता है। Support सर्वव्यापी नहीं है: मौजूदा Chrome, Edge और Firefox इसे रेंडर करते हैं, जबकि Safari इसे tab आइकन के लिए इस्तेमाल नहीं करता, इसलिए इसके साथ एक PNG या ICO fallback रखें।
एक सेट के बजाय एक फ़ाइल
एक raster favicon export के समय लिया गया size का फ़ैसला है। SVG ऐसा नहीं है: browser उसे उतने ही size पर rasterise करता है जितना surface को चाहिए, इसलिए 16 pixel का tab और 32 का bookmark bar दोनों को एक ही फ़ाइल से वही कुरकुरा नतीजा मिलता है — जो आमतौर पर एक अकेली PNG से भी छोटी होती है।
पेंच यह है कि support असमान है, और SVG favicon बाक़ी icon set की जगह नहीं ले सकता। Android और iOS पर इंस्टॉल-किए-गए-app वाले surfaces को अब भी PNG चाहिए, और Safari को अब भी अपने tab आइकन के लिए raster path चाहिए। SVG को एक काम कर रहे PNG और ICO setup के ऊपर रखी गई एक upgrade परत मानें।
SVG favicon कहाँ काम करता है
| Surface | व्यवहार |
|---|---|
| Chrome / Edge tab | SVG रेंडर करता है |
| Firefox tab | SVG रेंडर करता है |
| Safari tab | इसका उपयोग नहीं करता; आपके PNG या ICO पर fall back करता है |
| iOS Home Screen | apple-touch-icon PNG इस्तेमाल करता है, SVG कभी नहीं |
| Android / PWA install | web app manifest के PNG इस्तेमाल करता है |
head के tags
<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="/manifest.json">जो browsers image/svg+xml समझते हैं वे SVG लेते हैं; बाक़ी ICO पर उतर जाते हैं। कोई user-agent sniffing ज़रूरी नहीं।
एक favicon जो dark mode का अनुसरण करे
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
path { fill: #111111 }
@media (prefers-color-scheme: dark) {
path { fill: #ffffff }
}
</style>
<path d="M20 80 L50 20 L80 80 Z" />
</svg>Styles को SVG के अंदर होना चाहिए। एक favicon के लिए बाहरी stylesheet लोड नहीं होती। जो browsers SVG favicons सपोर्ट करते हैं वे आमतौर पर इसका सम्मान करते हैं; जो नहीं करते वे बस raster fallback इस्तेमाल करते हैं।
SVG favicon FAQ
क्या SVG favicon favicon.ico की जगह ले सकता है?
पूरी तरह नहीं। जो भी चीज़ /favicon.ico को path से माँगती है (और जो भी SVG favicons रेंडर नहीं करती) उसे raster फ़ाइल चाहिए। SVG एक जोड़ है, प्रतिस्थापन नहीं।
मेरा SVG favicon Safari में क्यों नहीं दिखता?
फ़िलहाल Safari tab आइकन के लिए SVG का उपयोग नहीं करता। यह आपके घोषित किसी भी raster आइकन पर fall back करता है, इसलिए हल यह पक्का करना है कि वह fallback मौजूद हो और सही दिखे।
क्या rel="mask-icon" वही चीज़ है?
नहीं। mask-icon एक अलग Safari फ़ीचर है जो एक सपाट monochrome SVG लेता है और pinned tabs के लिए उसे रंगता है। यह आपकी फ़ाइल के रंगों को अनदेखा करता है और सामान्य tab आइकन को प्रभावित नहीं करता।