पारदर्शी पृष्ठभूमि पर काला लोगो लाइट टैब में बढ़िया दिखता है और डार्क टैब में गायब हो जाता है। ICO खुद को बदल नहीं सकता, लेकिन SVG फ़ेविकॉन बदल सकता है: उसमें CSS का नियम होता है जो ब्राउज़र थीम के अनुसार रंग बदलता है।
समस्या: एक फ़ाइल, दो पृष्ठभूमियाँ
अब ब्राउज़र सिस्टम की थीम अपनाते हैं, इसलिए एक ही पेज की टैब पट्टी किसी आगंतुक के लिए लगभग सफ़ेद और दूसरे के लिए लगभग काली हो सकती है। एक के लिए बनाया एकरंगी फ़ेविकॉन दूसरे के लिए पढ़ने योग्य नहीं रहता।
कई साइटें आइकन की पृष्ठभूमि अपारदर्शी और रंगीन करके इसे सँभालती हैं। यह काम करता है, लेकिन आइकन भारी धब्बा लगता है, जबकि बड़े ब्रांड अलग उभरते चिह्न का इस्तेमाल करते हैं।
सही तरीका है ब्राउज़र को चुनाव करने देना, और यह बिना JavaScript या सर्वर पर पहचान किए संभव है।
अनुकूलनीय SVG कैसे काम करता है
SVG फ़ाइल एक दस्तावेज़ है, साधारण सपाट चित्र नहीं: इसमें style टैग और इसलिए मीडिया क्वेरी हो सकती है। भीतर prefers-color-scheme: dark नियम रखने से ब्राउज़र के डार्क थीम इस्तेमाल करने पर पाथ का fill रंग फिर तय होता है।
व्यवहार में SVG लाइट थीम का डिफ़ॉल्ट रंग तय करता है और फिर डार्क मोड में उसे बदलने वाला नियम रखता है। ब्राउज़र चित्र बनाते समय सही रंग लगाता है और आगंतुक थीम बदले तो टैब तुरंत अपडेट करता है।
यह तरीका केवल रंग उलटने तक सीमित नहीं है: आप बिलकुल अलग चित्र दिखा सकते हैं, जैसे लाइट मोड में अलग उभरता चिह्न और डार्क मोड में भरा हुआ बैज।
.ico के साथ SVG घोषित करें
SVG को link rel="icon" type="image/svg+xml" href="/favicon.svg" से घोषित करें। इसे समझने वाले ब्राउज़र इसे प्राथमिकता देते हैं और बाकी रूट में मौजूद favicon.ico चुन लेते हैं।
इसलिए कुछ हटाने की ज़रूरत नहीं: दोनों फ़ाइलें साथ रहती हैं और अलग-अलग क्लाइंट सँभालती हैं। यह 32 पिक्सेल के आइकन पर क्रमिक सुधार लागू करने का तरीका है।
एक सावधानी: फ़ेविकॉन SVG अपने आप में पूरा होना चाहिए। इस स्थिति में बाहरी फ़ॉन्ट, दूरस्थ चित्र या स्क्रिप्ट लोड नहीं होगी। टेक्स्ट को वेक्टर आकृतियों में बदलना होगा।
डार्क मोड की सीमाएँ
डार्क संस्करण डेस्कटॉप ब्राउज़र के फ़ेविकॉन पर लागू होता है। यह Apple Touch आइकन को नहीं बदलता, जो एक स्थिर अपारदर्शी PNG है, और न वेब मैनिफ़ेस्ट आइकन को, जिसे Android अपनी पृष्ठभूमि पर दिखाता है।
समर्थन भी हर जगह नहीं है: Chromium आधारित ब्राउज़र और Firefox अनुकूलनीय SVG पढ़ते हैं, जबकि Safari का समर्थन संस्करण पर निर्भर करता है। यह ठीक है, क्योंकि .ico अपने आप वैकल्पिक रूप में चुना जाता है।
इसलिए लाइट आइकन को डिफ़ॉल्ट रूप की तरह डिज़ाइन करें, जिसे हर आगंतुक देख सके, और डार्क संस्करण को उसे पढ़ सकने वाले ब्राउज़र के लिए अतिरिक्त सुधार मानें।
प्राथमिक स्रोत
अक्सर पूछे जाने वाले सवाल
क्या favicon.ico डार्क मोड सँभाल सकता है?
नहीं। ICO फ़ॉर्मैट स्थिर रास्टर चित्र रखता है, जिसमें थीम की जानकारी नहीं होती। मीडिया क्वेरी केवल SVG में रख सकते हैं, इसलिए आधुनिक सेट में दोनों होते हैं।
क्या लाइट और डार्क के लिए दो SVG फ़ाइलें चाहिए?
नहीं, एक फ़ाइल काफ़ी है। दोनों संस्करण एक ही SVG में prefers-color-scheme मीडिया क्वेरी से अलग रहते हैं। इससे अतिरिक्त अनुरोध और पहचान करने वाले कोड की ज़रूरत नहीं पड़ती।
डार्क थीम में रूप कैसे जाँचें?
ऑपरेटिंग सिस्टम की थीम बदलें और टैब फिर लोड करें। जनरेटर में लाइट और डार्क टैब के पूर्वावलोकन साथ दिखते हैं, इसलिए बार-बार थीम बदलने की ज़रूरत नहीं पड़ती।