अडैप्टिव फ़ेविकॉन बनाने के तरीके के बारे में खास जानकारी.
इस पोस्ट में, हम आपको SVG की मदद से, अडैप्टिव फ़ेविकॉन बनाने का तरीका बताना चाहते हैं. डेमो आज़माएं.
अगर आप वीडियो पसंद करते हैं, तो यहां इस पोस्ट का YouTube वर्शन दिया गया है:
खास जानकारी
पसंद के मुताबिक फ़ेविकॉन, वेब प्रोजेक्ट को बेहतर बनाने का एक बेहतरीन तरीका है. यह डेस्कटॉप ब्राउज़र टैब में दिखता है.
साथ ही, इसे "बाद के लिए सेव करें"
में पढ़ने वाले लोगों, आपकी साइट से लिंक करने वाली दूसरी ब्लॉग पोस्ट, और भी बहुत कुछ दिखाया जाता है. आम तौर पर, ऐसा .ico फ़ाइल टाइप के साथ किया जाता है, लेकिन हाल ही में ब्राउज़र ने
SVG, वेक्टर फ़ॉर्मैट का इस्तेमाल करने की अनुमति दी है. प्रोग्रेसिव एन्हैंसमेंट की मदद से, अच्छे से काम करने वाले .ico फ़ेविकॉन बनाए जा सकते हैं. साथ ही, उपलब्ध होने पर .svg पर अपग्रेड किया जा सकता है.
SVG की क्वालिटी को नुकसान पहुंचाए बिना, बड़े पैमाने पर या बड़ा किया जा सकता है और इसका साइज़ बहुत छोटा हो सकता है. इसमें एम्बेड किए गए सीएसएस या एम्बेड की गई मीडिया क्वेरी भी हो सकती हैं. इसका मतलब है कि अगर किसी रीडर ऐप्लिकेशन या बुकमार्क बार में SVG फ़ेविकॉन का इस्तेमाल किया जाता है, तो SVG में गहरे रंग की प्राथमिकता वाली स्टाइल उपलब्ध होने की वजह से, उपयोगकर्ता को काम का (हल्के या गहरे रंग) वाला आइकॉन मिल सकता है. इसके बाद, SVG, हल्के और गहरे रंग वाले उपयोगकर्ताओं की पसंद के हिसाब से, एम्बेड की गई स्टाइल का इस्तेमाल करता है.
मार्कअप
SVG मार्कअप
XML है, जिसमें
.svg फ़ाइल टाइप एक्सटेंशन का इस्तेमाल किया जाता है. यह इसे ज़्यादा डाइनैमिक तरह
के कोड होल्ड करने की अनुमति देता है.
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. ये सीएसएस के लिए तैयार की गई हैं. इन्हें मैंने खुद एडिट किया है.
आपके SVG फ़ॉर्मैट के इस्तेमाल का फ़ेविकॉन दिखे, इसके लिए क्लास और आईडी जोड़ने की ज़रूरत नहीं है.
एचटीएमएल से फ़ेविकॉन SVG को लिंक करें
अपने एचटीएमएल के <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) कर दिया, लेकिन गुलाबी ऐक्सेंट हैट को छोड़ दिया.
नतीजा
अब आपको पता चल गया है कि मैंने इसे कैसे किया, तो आप कैसी होंगी‽ 🙂
चलिए, इसे अलग-अलग तरीके से समझें और वेब पर सभी के काम करने के तरीके सीखें. एक डेमो तैयार करें, मुझे ट्वीट करें वाले लिंक, और मैं उसे नीचे दिए गए कम्यूनिटी रीमिक्स सेक्शन में जोड़ दूंगी!