फ़ेविकॉन जनरेटर क्या है?

यह फ़ेविकॉन जनरेटर आपकी वेबसाइट के लिए ज़रूरी सभी साइज़ बनाता है — अपलोड की गई इमेज, टाइप किए गए शुरुआती अक्षरों या किसी इमोजी से। एक स्रोत चुनें और 16×16, 32×32, 48×48 साइज़ वाली ICO फ़ाइलें, बिना गुणवत्ता खोए स्केल होने वाली SVG, साथ ही Apple Touch आइकन और Android होम स्क्रीन के लिए PNG वर्शन पाएं — आपके प्रोजेक्ट में तुरंत इस्तेमाल के लिए तैयार।

किसी इमेज से शुरू करें, फ़ॉन्ट और आकार चुनकर एक से तीन अक्षर टाइप करें, या कोई इमोजी चुनें — फिर टूल छह PNG (16, 32, 48, 180, 192, 512 pixel), एक साफ़ SVG, और एक multi-resolution ICO तैयार करता है जिसमें वो तीन छोटी sizes होती हैं जिन्हें Windows tab आज भी मांगते हैं। सब कुछ एक ZIP में आता है — site.webmanifest के साथ और पेज के head में चिपकाने के लिए तैयार link tag के साथ। चौकोर SVG या PNG स्रोत सबसे साफ़ scaling देता है।

उपयोग कैसे करें

1. एक स्रोत चुनें: एक चौकोर इमेज अपलोड करें (PNG, JPG या SVG, बेहतर हो 512×512 या उससे बड़ी), फ़ॉन्ट और आकार चुनकर शुरुआती अक्षर टाइप करें, या कोई इमोजी चुनें।
2. सभी स्टैंडर्ड साइज़ (16px, 32px, 48px, 180px, 192px, 512px) पर जनरेट हुए फ़ेविकॉन का प्रीव्यू देखें।
3. पूरा फ़ेविकॉन पैकेज ZIP फ़ाइल के रूप में डाउनलोड करें, जिसमें ICO फ़ाइल, सभी PNG साइज़, और अपने पेज हेड में पेस्ट करने के लिए HTML लिंक टैग शामिल हैं।

कब उपयोग करें

• नई वेबसाइट या web app पर tab और home-screen icons जोड़ने के लिए।
• नए logo के बाद मौजूदा साइट पर ब्रांड पहचान को सब जगह अपडेट करने के लिए।
• Add to Home Screen के लिए manifest spec के मुताबिक़ PWA icons बनाने के लिए।

परिणाम

एक डेवलपर अपने स्टार्टअप का 1024×1024 लोगो अपलोड करता है। टूल favicon.ico (16/32/48), apple-touch-icon.png (180×180), और Android आइकन (192/512) सहित पूरा फ़ेविकॉन सेट जनरेट करता है, साथ ही HTML मेटा टैग भी।

अक्सर पूछे जाने वाले प्रश्न

इतनी सारी अलग-अलग favicon sizes की ज़रूरत क्यों है?

हर प्लेटफ़ॉर्म एक तय size माँगता है। Chrome tab 32 pixel इस्तेमाल करते हैं, bookmark 16, iOS home screen 180, Android home screen 192 और PWA splash 512। सारी sizes देने पर आइकन हर जगह तीखा बना रहता है।

PNG, SVG या JPG में से क्या अपलोड करूँ?

SVG सबसे अच्छा है क्योंकि वो बिना नुक़सान के किसी भी size तक scale कर सकता है। उसके बाद 512 × 512 का PNG। JPG भी चलेगा पर lossy compression आइकन के किनारों पर halos छोड़ देता है, ख़ासकर 16 और 32 pixel पर।

ICO फ़ाइल के अंदर क्या होता है?

ICO एक container फ़ॉर्मेट है। यह टूल जो ICO बनाता है उसमें तीन bitmap layers (16, 32 और 48 pixel) होती हैं — Windows ख़ुद चुनता है कि taskbar, फ़ाइल लिस्ट या browser tab में कौन-सी layer दिखे।

इन फ़ाइलों को प्रोजेक्ट में कहाँ रखूँ?

साइट के public root में index.html के साथ unzip कीजिए। दिए हुए link tag root पथ (/favicon.ico, /apple-touch-icon.png) इस्तेमाल करते हैं, इसलिए सादे HTML या Next.js, Astro, Vite जैसे frameworks में अतिरिक्त config की ज़रूरत नहीं।

favicon बदल लिया पर browser में अभी भी पुराना दिख रहा है, क्यों?

Browser favicon को बहुत आक्रामक तरीक़े से cache करते हैं। हार्ड रिफ़्रेश करें (Windows पर Ctrl+Shift+R, Mac पर Cmd+Shift+R), या link tag के पीछे query string जैसे /favicon.ico?v=2 जोड़ दीजिए ताकि नया फ़ाइल आ जाए। आम तौर पर एक दिन में cache ख़ुद ख़ाली हो जाता है।

संबंधित उपकरण