अडैप्टिव फ़ेविकॉन बनाने के तरीके के बारे में बुनियादी जानकारी.
इस पोस्ट में, एसवीजी की मदद से अडैप्टिव फ़ेविकॉन बनाने का तरीका बताया गया है. डेमो आज़माएं.
अगर आपको वीडियो देखना पसंद है, तो यहां इस पोस्ट का YouTube वर्शन दिया गया है:
खास जानकारी
पसंद के मुताबिक बनाया गया फ़ेविकॉन, किसी वेब प्रोजेक्ट को बेहतर बनाने का शानदार तरीका है. यह डेस्कटॉप ब्राउज़र के टैब पर दिखता है. साथ ही, "बाद में पढ़ने के लिए सेव करें", आपकी साइट से लिंक की गई अन्य ब्लॉग पोस्ट वगैरह में भी दिखता है. आम तौर पर, ऐसा .ico फ़ाइल टाइप का इस्तेमाल करके किया जाता है. हालांकि, हाल ही में ब्राउज़र ने वेक्टर फ़ॉर्मैट SVG का इस्तेमाल करने की अनुमति दी है. प्रगतिशील बेहतर बनाने की सुविधा का इस्तेमाल करके, अच्छी तरह से काम करने वाले .ico फ़ैविकॉन दिखाए जा सकते हैं. साथ ही, उपलब्ध होने पर .svg पर अपग्रेड किया जा सकता है.
SVG फ़ाइलों की क्वालिटी में बदलाव किए बिना, उन्हें बड़े और छोटे किए जा सकते हैं. साथ ही, इनका साइज़ बहुत छोटा हो सकता है. इनमें एम्बेड की गई सीएसएस और मीडिया क्वेरी भी हो सकती हैं. इसका मतलब है कि अगर किसी रीडर ऐप्लिकेशन या बुकमार्क बार में SVG फ़ैविकन का इस्तेमाल किया जाता है, तो हो सकता है कि उपयोगकर्ता को थीम के हिसाब से (हल्का या गहरा) आइकॉन दिखे. ऐसा, SVG में दी गई गहरे रंग की प्राथमिकता वाली स्टाइल की वजह से होता है. इसके बाद, एसवीजी, उपयोगकर्ता की पसंद के हिसाब से लाइट और डार्क मोड में बदल जाता है.
मार्कअप
एसवीजी मार्कअप, .svg फ़ाइल टाइप एक्सटेंशन का इस्तेमाल करने वाला XML है. इसकी मदद से, ज़्यादा डाइनैमिक टाइप के कोड को सेव किया जा सकता है.
favicon.svg बनाकर शुरू करें
favicon.svg नाम से नई फ़ाइल बनाएं और इसमें ये चीज़ें जोड़ें:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
</svg>
यहां मेरी SVG फ़ाइल है. मैंने अपने आर्टवर्क के हिसाब से viewBox का साइज़ तय किया है:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
</svg>
आकार और पाथ जोड़ना
इसके बाद, SVG पाथ कोड जोड़ें. आम तौर पर, इसका मतलब है कि SVG को कोड एडिटर में खोलना, लेकिन आम तौर पर वह कोड लोगों के लिए आसान नहीं होता. डिज़ाइन टूल से SVG एक्सपोर्ट करने और उसे ऑप्टिमाइज़ करने के बारे में बताने वाली एक बेहतरीन गाइड यहां दी गई है.
इस जीयूआई चैलेंज के आर्टवर्क को एक डिज़ाइनर ने बनाया है. उन्होंने इसे Adobe Illustrator में बनाया है. मैंने इसे ज़्यादा से ज़्यादा ऑप्टिमाइज़ किया है. मैंने इसे SVGOMG के ज़रिए चलाया और फिर मैन्युअल तरीके से उसमें मौजूद ग़ैर-ज़रूरी चीज़ों को हटा दिया.
यहां मेरे skull आर्टवर्क पाथ ग्रुप का उदाहरण दिया गया है. इसमें, ग़ैर-ज़रूरी वर्णों को हटाने के बाद का डेटा दिख रहा है:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<g id="skull">
<path id="skull-outline" class="favicon-stroke" stroke-linejoin="round" d="M19.62 188.39A166.62 166.62 0 0 1 186.24 21.77c115.25 0 166.61 74.59 166.61 166.62 0 1.83-.08 3.64-.13 5.46h.13s.68 175.09.68 178.65c0 30.11-16.26 41.67-36.32 41.67-12.7 0-35.22-3.93-36.22-32.69h-.2c-1 28.76-16.81 32.69-36.22 32.69-18 0-32.87-6.78-35.77-32.53-2.9 25.75-17.8 32.53-35.8 32.53-20.06 0-36.32-11.56-36.32-41.67 0-2.48.36-24.88.36-24.88A166.68 166.68 0 0 1 19.62 188.39Z" />
<path id="eyes-and-nose" d="M180.77 205.76c0 23.64 12.84 42.81 28.68 42.81s28.68-19.17 28.68-42.81-12.84-42.82-28.68-42.82-28.68 19.17-28.68 42.82M275 205.76c0 23.64 12.84 42.81 28.68 42.81s28.68-19.17 28.68-42.81-12.84-42.82-28.68-42.82S275 182.11 275 205.76M264.51 276.85s-29.26 43.53-20.12 49.23c7.07 4.41 20.49-16.71 20.49-16.71s12.82 22.58 16.76 20c16.24-10.71-17.13-52.5-17.13-52.5"/>
<path id="jawline" class="favicon-stroke" fill="none" stroke-linecap="round" d="M114.92 284.33c22.54-1 22 7 22 62.48" />
</g>
</svg>
#eyes-and-nose जैसे आईडी सिलेक्टर और .favicon-stroke जैसी क्लास पर ध्यान दें. इन्हें आसानी से पढ़ा जा सकता है. ये सीएसएस के लिए तैयार किए गए, मेरे हाथ से किए गए बदलाव हैं.
आपके एसवीजी को अडैप्टिव फ़ैविकन बनाने के लिए, क्लास और आईडी जोड़ने की ज़रूरत नहीं है.
एचटीएमएल से फ़ेविकॉन एसवीजी लिंक करना
अपने एचटीएमएल के <head> टैग में, .ico फ़ैविकन के बाद यह जोड़ें:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
नया आइकॉन, .ico वर्शन जैसा दिख सकता है. इसलिए, पुष्टि करें कि इसका इस्तेमाल किया जा रहा है. DevTools का नेटवर्क पैनल खोलें. इमेज के हिसाब से फ़िल्टर करें और फ़ैविकन खोजें:
स्टाइल
एचटीएमएल की तरह, मार्कअप में <style> टैग जोड़ा जा सकता है, ताकि उस दस्तावेज़ के दायरे के लिए उसका इस्तेमाल किया जा सके:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
</style>
…
</svg>
हल्के रंग वाली थीम का वर्शन, मेरे फ़ैविकॉन SVG का डिफ़ॉल्ट रंग होगा. मैंने इसके लिए ज़्यादातर स्ट्रोक और भरने के रंग वाले स्टाइल लिखे थे:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
.favicon-stroke {
stroke-width: 8px;
stroke: #8929ff;
}
#skull-outline { fill: white }
#eyes-and-nose, #hat-outline { fill: #8929ff }
#hat-fill, #hat-bill { fill: #e662e6 }
</style>
…
</svg>
इसके बाद, सबसे मज़ेदार हिस्सा आता है. इसमें आपको अपने फ़ेविकॉन के डार्क थीम वर्शन को स्टाइल करना होता है. इसके लिए, स्टाइल टैग में मौजूद मीडिया क्वेरी में स्टाइल शामिल होंगी:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
…
@media (prefers-color-scheme: dark) {
/* dark theme styles */
}
</style>
…
</svg>
मेरा वीडियो कुछ ऐसा दिखता है:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
…
@media (prefers-color-scheme: dark) {
.favicon-stroke { stroke: #343a40 }
#skull-outline { fill: #adb5bd }
#hat-outline { fill: #343a40 }
#eyes-and-nose { fill: #343a40 }
}
</style>
…
</svg>
मैंने चमकीले बैंगनी बॉर्डर को बदलकर, गहरे धूसर (#343a40) रंग का बॉर्डर चुना. साथ ही, खोपड़ी की हड्डी के रंग को सफ़ेद से हल्के धूसर (#adb5bd) रंग में बदला. हालांकि, मैंने पिंक रंग के ऐक्सेंट वाले टोपी को नहीं बदला.
नतीजा
अब आपको पता है कि मैंने यह कैसे किया, तो आप कैसे करेंगे‽ 🙂
आइए, अलग-अलग तरीकों का इस्तेमाल करके, वेब पर कॉन्टेंट बनाने के सभी तरीके जानें. डेमो बनाएं और मुझे ट्वीट करें लिंक भेजें. हम इसे कम्यूनिटी रीमिक्स सेक्शन में जोड़ देंगे!