वेबसाइट के लिए फ़ेविकॉन कैसे बनाएँ
फ़ेविकॉन ब्राउज़र टैब में वह छोटा आइकन है — दस टैब खुले हों तो लोग जिस दृश्य बुकमार्क को स्कैन करते हैं। बनाना सीधा है: चिह्न इतना सरल बनाएँ कि डाक टिकट आकार पर पढ़े, मानक आकार निर्यात करें (अक्सर एक `.ico` में बंडल), HTML टैग जोड़ें, और iOS होम-स्क्रीन शॉर्टकट की परवाह हो तो बड़ा PNG जोड़ें। नीचे चरणों का पालन करें, फिर बाइनरी फ़ाइलें हाथ से संपादित किए बिना आकार पैक करने के लिए फ़ेविकॉन जनरेटर उपयोग करें।
1. बिलबोर्ड के लिए नहीं, 16×16 के लिए डिज़ाइन करें
टैब-बार आकार पर बाल जैसी रेखाएँ, छोटा टाइप और व्यस्त ग्रेडिएंट दलदल बन जाते हैं। एक या दो रंगों वाला बोल्ड सिल्हूट पूर्ण वर्डमार्क के मिनी संस्करण से कहीं बेहतर स्केल करता है।
वर्ग से शुरू करें। चौड़े लोगो को पहले केंद्रित वर्ग में क्रॉप चाहिए — नहीं तो जनरेटर पूरा कैनवास सिकोड़ता है और चिह्न धब्बा बन जाता है।
वेक्टर SVG या कम से कम 256×256 PNG मास्टर रखें (512×512 बेहतर)। आप इस स्रोत से डाउनसैंपल कर रहे हैं, धुँधले थंबनेल से अपसैंपल नहीं।
2. बहु-आकार ICO निर्यात करें (या PNG सेट)
क्लासिक `favicon.ico` एक फ़ाइल में 16×16, 32×32 और 48×48 परतें बंडल करता है ताकि डेस्कटॉप टैब और बुकमार्क निकटतम मिलान चुनें।
फ़ेविकॉन जनरेटर पर PNG, SVG या JPG अपलोड करें, आकार बंडल चुनें, और डाउनलोड करें — मैन्युअल hex संपादन ज़रूरी नहीं।
कई टीमें 32×32 और 180×180 पर स्टैंडअलोन PNG भी भेजती हैं। प्रोग्रेसिव वेब ऐप को वेब ऐप मैनिफ़ेस्ट में स्पष्ट आइकन प्रविष्टियाँ भी चाहिए।
3. फ़ाइलें रखें और HTML जोड़ें
`favicon.ico` साइट रूट में रखें, या अपने फ़्रेमवर्क परंपरा का पालन करें — Next.js, Astro आदि इसे `public/` के तहत अपेक्षा करते हैं।
न्यूनतम टैग: `<link rel="icon" href="/favicon.ico" sizes="any">`। PNG वेरिएंट भी हों तो जैसे `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">` जोड़ें।
iOS «Add to Home Screen» के लिए 180×180 PNG शामिल करें: `<link rel="apple-touch-icon" href="/apple-touch-icon.png">`।
4. डिप्लॉय के बाद सत्यापित करें
हार्ड-रिफ़्रेश या इन्कॉग्निटो विंडो खोलें — फ़ेविकॉन आक्रामक रूप से कैश होते हैं, इसलिए सामान्य रीलोड अभी भी कल का आइकन दिखा सकता है।
फ़ोन पर साइट को होम स्क्रीन पर जोड़ें और जाँचें कि apple-touch-icon बिना अप्रत्याशित पैडिंग के तेज़ दिखता है।
रीब्रांड? ICO, PNG और मैनिफ़ेस्ट आइकन साथ बदलें। पुराने और नए एसेट मिलाना उपयोगकर्ताओं को एक ही साइट के दो अलग चिह्न देता है।
जाल जो दोपहर बर्बाद करते हैं
छोटे आकार एम्बेड किए बिना 512 px PNG का नाम `favicon.ico` रखना — कुछ वातावरण खराब अपस्केल करते हैं और टैब आइकन नरम लगता है।
केवल-SVG फ़ेविकॉन समर्थन बढ़ा रहे हैं लेकिन कुछ कॉर्पोरेट इन्ट्रानेट बिल्ड में चुपचाप विफल होते हैं; ICO प्लस PNG विश्वसनीय डिफ़ॉल्ट रहता है।
पूर्ण पारदर्शी आइकन हल्की पृष्ठभूमि वाले Windows टैब पर टूटे लग सकते हैं — चिह्न के पीछे ठोस ब्रांड-रंग वर्ग अक्सर साफ़ पढ़ता है।
अभी अपना ICO बनाएँ
वर्ग लोगो अपलोड करें, फ़ेविकॉन जनरेटर से बहु-आकार फ़ेविकॉन डाउनलोड करें, फिर खंड 3 के HTML टैग चिपकाएँ।
फ़ेविकॉन जनरेटर खोलेंफ़ेविकॉन प्रश्न
- क्या एक ICO फ़ाइल पर्याप्त है?
- डेस्कटॉप और मोबाइल पर ब्राउज़र टैब के लिए आमतौर पर हाँ। PWA भेजते हैं या iOS होम-स्क्रीन टाइल की परवाह है तो PNG आकार और मैनिफ़ेस्ट प्रविष्टियाँ भी जोड़ें।
- क्या केवल SVG फ़ेविकॉन उपयोग कर सकते हैं?
- आधुनिक ब्राउज़र पर बढ़ते हुए हाँ — लेकिन ICO और PNG साथ अभी भी एज केस कवर करते हैं। SVG पूरक के रूप में अच्छा है, हमेशा एकमात्र एसेट के रूप में नहीं।
- फ़ाइल अपडेट की पर टैब अभी पुराना आइकन दिखाता है
- कैश। इन्कॉग्निटो आज़माएँ, फ़ाइल का नाम बदलें, या नए एसेट चिपकने तक href पर वर्शन क्वेरी जोड़ें।
- क्या फ़ेविकॉन हेडर लोगो जैसा ही है?
- अक्सर ब्रांड रंग साझा करते हैं, लेकिन फ़ेविकॉन सरलीकृत चिह्न होना चाहिए। हेडर लोगो टैगलाइन और बारीक विवरण रख सकता है जो टैब आइकन नहीं कर सकता।
- वास्तव में किन आकारों की ज़रूरत है?
- ICO के अंदर 16, 32 और 48 अधिकांश टैब कवर करते हैं; apple-touch-icon के लिए 180×180; PWA मैनिफ़ेस्ट माँगता हो तो 192 और 512 जोड़ें।