Dark Mode Favicons: ऐसा बनाएं जो खुद ढल जाए
एक गहरा navy मार्क डार्क tab strip के सामने गायब हो जाता है। आप इसे एक ही SVG से ठीक कर सकते हैं, या दो PNG से, पर नीचे एक default icon फिर भी रखते हैं।
dark mode असल में क्या बदलता है
browser की tab strip light mode में हल्की होती है और dark mode में गहरी। आपका favicon उसके साथ तब तक नहीं बदलता जब तक आप उसे बदलने पर मजबूर न करें। जो मार्क सफ़ेद पर तीखा दिखता है वह लगभग काली tab पर गायब हो सकता है, और हल्के chrome पर हल्के मार्क के लिए इसका उल्टा सच है।
जवाब देने के आपके पास दो तरीके हैं। एक ऐसा SVG ship करें जो खुद को दोबारा रंगे, या दो PNG ship करें और browser को सिस्टम सेटिंग के आधार पर चुनने दें। SVG वाला रास्ता एक फ़ाइल और एक request है। PNG वाला रास्ता ज़्यादा clients पर काम करता है, पर media-swapped favicons के लिए इसका सपोर्ट असमान है, इसलिए यह fallback पर ज़्यादा निर्भर करता है।
तरीका A: एक SVG जो खुद पलट जाता है
एक SVG favicon अपना खुद का CSS ले जा सकता है। SVG के अंदर एक prefers-color-scheme: dark media query रखें और वहीं fill बदलें। browser सिस्टम सेटिंग पढ़ता है और बिना किसी दूसरी फ़ाइल और बिना किसी अतिरिक्त link tag के icon को दोबारा रंग देता है।
यही तरीका सबसे पहले अपनाना चाहिए। यह एक ही फ़ाइल है, हर size पर तीखा रहता है, और यही एकमात्र तरीका है जिसमें एक ही asset दोनों themes को कवर करता है।
SVG, fallbacks के साथ
<!-- In your <head>: SVG first, then the raster fallback -->
<link rel="icon" type="image/svg+xml" href="/icon.svg">
<link rel="icon" href="/favicon.ico" sizes="any">
<!-- icon.svg, with the theme rule baked in -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #1a1a1a; }
@media (prefers-color-scheme: dark) {
path { fill: #f5f5f5; }
}
</style>
<path d="M6 6h20v20H6z" />
</svg>जो browser SVG पढ़ता है वह पहली लाइन इस्तेमाल करता है और media query का पालन करता है। बाकी सब favicon.ico पर fallback करता है।
तरीका B: media-scoped link tags पर दो PNG
अगर आप SVG इस्तेमाल नहीं कर सकते, तो दो PNG export करें (मान लीजिए एक dark-on-light वर्शन और एक light-on-dark वर्शन) और हर एक को उसके link tag पर एक media attribute के साथ संकेत दें। browser वही लोड करता है जो मौजूदा theme से मेल खाता है।
इसका सपोर्ट अनियमित है। कुछ browsers icon links पर media attribute को नज़रअंदाज़ कर देते हैं और बस पहला वाला ले लेते हैं जिसे वे समझते हैं। इसीलिए आख़िरी लाइन मायने रखती है: बिना किसी media condition वाला एक सादा favicon.ico वह default है जिस पर कोई भी client fall back कर सकता है।
दो-PNG वाला सेटअप
<link rel="icon" type="image/png" href="/favicon-dark.png"
media="(prefers-color-scheme: dark)">
<link rel="icon" type="image/png" href="/favicon-light.png"
media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon.ico" sizes="any">बिना शर्त वाले favicon.ico को आख़िर में रखें ताकि जो browser media hints को नज़रअंदाज़ करे उसके पास भी एक icon हो।
आलसी रास्ता जो बस काम कर जाता है
अगर इसमें से कुछ भी मेहनत के लायक नहीं है, तो एक ही मध्यम-टोन वाला मार्क इस्तेमाल करें। एक ऐसा रंग जिसमें light और dark दोनों chrome पर पढ़े जाने लायक पर्याप्त contrast हो (एक संतृप्त brand रंग, न लगभग काला और न लगभग सफ़ेद) एक ही फ़ाइल से दोनों themes में पढ़ा जा सकता है।
यह व्यावहारिक default है। आप हर theme से एकदम सटीक मेल खो देते हैं, पर एक ऐसा asset पा लेते हैं जो कभी गायब नहीं होता और गलत होने के लिए कोई media conditions नहीं होतीं।
अक्सर पूछे जाने वाले सवाल
मैं dark mode के लिए favicon को कैसे बदलूं?
एक SVG favicon इस्तेमाल करें जिसकी styles के अंदर एक prefers-color-scheme: dark media query हो जो fill का रंग बदले, या media-scoped link tags पर दो PNG ship करें। किसी भी तरह एक सादा favicon.ico default के रूप में रखें।
क्या dark mode favicons हर browser में काम करते हैं?
आंतरिक media query वाले SVG favicons आधुनिक browsers पर अच्छी तरह समर्थित हैं। media-swapped PNG favicons कम भरोसेमंद हैं, इसलिए हमेशा एक बिना शर्त वाला fallback icon शामिल करें।
क्या मैं dark mode छोड़कर एक ही favicon इस्तेमाल कर सकता हूं?
हां। एक मध्यम-टोन वाला मार्क चुनें जिसमें light और dark दोनों tabs पर पढ़े जाने लायक पर्याप्त contrast हो। यह एक ही फ़ाइल है और किसी भी theme के सामने कभी गायब नहीं होती।
क्या favicon.ico को dark mode के लिए बदलने की ज़रूरत है?
नहीं। favicon.ico पुराने clients और crawlers के लिए आपका default fallback है। इसे एक ही पढ़ने योग्य वर्शन के रूप में रहने दें और theme swapping को इसके ऊपर वाले SVG या PNG links से संभालें।