मल्टी-साइज़ फ़ेविकॉन जनरेटर क्या है?

एक इमेज अपलोड करें — या 1 से 3 अक्षर या एक इमोजी टाइप करें — और 16×16 ICO से 1024×1024 App Store आइकन तक सभी स्टैंडर्ड साइज़ पाएं, साथ में स्केलेबल favicon.svg भी। Apple Touch, Android Chrome, MS Tile, और Safari पिन्ड टैब शामिल हैं। एक-एक करके डाउनलोड करें या ZIP में सब एक साथ लें।

अपने लोगो से शुरू करें या कुछ अक्षरों या एक इमोजी से, अपने रंगों और फ़ॉन्ट के साथ झटपट एक आइकन बनाएं। जनरेटर 17 अलग-अलग PNG फ़ाइलें बनाता है जो पुराने favicon साइज़ (16, 32, 48, 64, 96, 128, 256), Apple Touch आइकन (152, 167, 180), 1024 App Store आइकन, Android Chrome (192, 384), MS Tile (144, 150, 310) और 512 PWA को कवर करती हैं। ग्रिड को प्लेटफ़ॉर्म के हिसाब से फ़िल्टर करें, आउटपुट के लिए वर्ग, गोल किनारे या वृत्त चुनें, और डाउनलोड से पहले लाइट और डार्क टैब पर favicon जाँचें। हर ZIP में मल्टी-रेज़ॉल्यूशन favicon.ico, एक स्केलेबल favicon.svg, पेस्ट-करने-लायक HTML स्निपेट और Android साइज़ पर maskable purpose सेट किया हुआ manifest.json भी मिलता है — इसे PWA के रूप में इंस्टॉल-योग्य बनाने के लिए ऐप का नाम और छोटा नाम जोड़ें।

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

1. अपने सोर्स के रूप में एक हाई-रेज़ोल्यूशन स्क्वायर इमेज (कम से कम 512×512px) अपलोड करें — या टेक्स्ट मोड पर जाकर 1 से 3 अक्षर या एक इमोजी टाइप करके तुरंत एक बनाएं।
2. ग्रिड में सभी जनरेट हुए साइज़ देखें। ज़रूरी प्लेटफ़ॉर्म के अनुसार साइज़ ऑन या ऑफ़ करें।
3. अलग-अलग साइज़ डाउनलोड करें, मल्टी-रेज़ॉल्यूशन favicon.ico अकेले ले लें, या ‘सभी डाउनलोड करें’ दबाएँ — चुने गए सभी साइज़, ICO बंडल, HTML स्निपेट और मैनिफ़ेस्ट सहित ZIP मिलेगा।

कब उपयोग करें

• नई साइट लॉन्च करते समय हर ब्राउज़र और OS पर favicon दिखाने के लिए।
• रीब्रांडिंग: नए लोगो से सभी PWA और होम-स्क्रीन आइकन दोबारा बनाने के लिए।
• होम स्क्रीन में जोड़ें सपोर्ट जोड़ते समय Android maskable आइकन सही दिखाए, इसके लिए।

परिणाम

एक वेब एजेंसी क्लाइंट के ब्रांड रिफ़्रेश के लिए नया लोगो अपलोड करती है। डेस्कटॉप, iOS Safari, Android Chrome, Windows टाइल्स और PWA मेनिफ़ेस्ट आइकन के 12 साइज़ तुरंत तैयार मिलते हैं।

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

सोर्स इमेज कितनी बड़ी होनी चाहिए?

कम-से-कम 512×512 पिक्सेल, चौकोर, बीच में लोगो और किनारों पर थोड़ा पैडिंग। इससे छोटा होने पर PWA 512 आइकन धुंधला दिखेगा। वेक्टर सोर्स (SVG से 1024 PNG रास्टर) और बेहतर रहता है।

PNG और ICO दोनों favicon क्यों चाहिए?

आधुनिक ब्राउज़र link rel='icon' के ज़रिए अलग-अलग साइज़ की PNG फ़ाइलें इस्तेमाल करते हैं और अब एक ही स्केलेबल SVG favicon को तरजीह देने लगे हैं। .ico फ़ाइल पुराने Windows ब्राउज़र, कई होस्टिंग प्लेटफ़ॉर्म और कुछ पिनड-साइट सेटअप के लिए अब भी ज़रूरी है। यह जनरेटर तीनों देता है — हर मॉडर्न साइज़ की PNG, एक स्केलेबल favicon.svg, और 16, 32, 48px फ़्रेम को एक साथ रखने वाली favicon.ico।

maskable आइकन क्या है और Android को इसकी ज़रूरत क्यों है?

Android लॉन्चर के हिसाब से होम-स्क्रीन आइकन को सर्कल, स्क्वर्कल या गोल किनारों वाले स्क्वायर में काटता है। maskable आइकन के बीच ~80% सुरक्षित क्षेत्र होता है ताकि लोगो का अहम हिस्सा कभी न कटे। सोर्स के चारों ओर ~10% पैडिंग जोड़ें।

जेनरेट हुई फ़ाइलें कहाँ रखें?

हर PNG साइट के public रूट (या /static) में डालें, HTML स्निपेट को पेज के head में कॉपी करें और manifest.json लिंक करें। Apple Touch और favicon लिंक HTML head में जाते हैं; PWA आइकन manifest से रेफ़र होते हैं।

बैकग्राउंड और पैडिंग ऑप्शन क्यों हैं?

ट्रांसपेरेंट लोगो ब्राउज़र टैब में ठीक दिखते हैं, लेकिन Android या iOS पीछे अपना गोल चौकोर जोड़ देता है तो जगह अजीब लगती है। यहाँ एक ठोस बैकग्राउंड और 8-12% पैडिंग जोड़ने से हर लॉन्चर में टाइल का रेंडर एक जैसा रहता है।

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