अडैप्टिव फ़ेविकॉन बनाने के तरीके के बारे में खास जानकारी.
इस पोस्ट में, हम आपको बताना चाहते हैं कि अपनी पसंद के हिसाब से फ़ेविकॉन कैसे बनाया जा सकता है. 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 को एक्सपोर्ट और ऑप्टिमाइज़ करके डिज़ाइन टूल.
इस GUI Challenge का आर्टवर्क एक डिज़ाइनर से लिया है, जिन्होंने इसे Adobe में बनाया है इलस्ट्रेटर. मुझे बहुत-बहुत ऑप्टिमाइज़ किया. मैंने इसे 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) कर दिया है, लेकिन
गुलाबी लहज़े वाली हैट छोड़ दी.
नतीजा
अब जब आपको पता है कि मैंने इसे कैसे किया, तो आप कैसे करेंगे ‽ 🙂
आइए, हम अलग-अलग तरह के काम करते हैं और वेब पर काम करने के सभी तरीके सीखते हैं. एक डेमो बनाएं, मुझे ट्वीट करें और मैं इसे जोड़ दूंगा कम्यूनिटी रीमिक्स बनाने के लिए यहां दिए गए सेक्शन पर जाएं!