एक सही फ़ेविकॉन सेट एक फ़ाइल से ज़्यादा होता है: ब्राउज़र को एक मल्टी-साइज़ .ico चाहिए, iOS को 180px apple-touch-icon चाहिए, Android को 192 और 512px PNG के साथ एक वेब मैनिफ़ेस्ट चाहिए। यह टूल इन सभी को एक ही इमेज से रेंडर करता है और उन्हें एक ZIP में पैक करता है, साथ में वे सटीक HTML टैग जिन्हें आप अपने <head> में पेस्ट करें।
प्रीव्यू आपके आइकॉन को असली 16, 32 और 48px पर दिखाता है ताकि शिप करने से पहले आप जाँच लें कि यह छोटे साइज़ पर भी पहचानने योग्य रहता है।
इस्तेमाल कैसे करें
- अपना लोगो जोड़ेंचौकोर इमेज सबसे अच्छी रहती हैं; बाक़ी सेंटर-क्रॉप कर दी जाती हैं।
- छोटे साइज़ जाँचें16px प्रीव्यू वही है जो ज़्यादातर यूज़र असल में टैब में देखेंगे।
- ZIP डाउनलोड करेंfavicon.ico, छह PNG, site.webmanifest और पेस्ट करने के लिए तैयार html-snippet.txt।
एक इमेज अंदर, एक पूरा फ़ेविकॉन सेट बाहर
एक अकेला लोगो या आइकन डालें और यह जनरेटर वह पूरा सेट बना देता है जो एक आधुनिक साइट को चाहिए: 16, 32 और 48 पिक्सेल संस्करण बंडल करती एक मल्टी-साइज़ favicon.ico, Apple टच आइकन के लिए 16, 32, 48, 180 पर स्टैंडअलोन PNG, और Android व PWA इंस्टॉल के लिए 192 व 512, साथ ही एक site.webmanifest। सब कुछ एक ही ZIP के रूप में नीचे आता है ताकि आप इसे सीधे अपने प्रोजेक्ट रूट में डाल सकें।
आपको एक तैयार-पेस्ट HTML हेड स्निपेट भी मिलता है जिसमें सही link और meta टैग पहले से जुड़े होते हैं। उसे अपने टेम्पलेट में कॉपी करें, फ़ाइलें अपलोड करें, और फ़ेविकॉन ब्राउज़र टैब, बुकमार्क और होम-स्क्रीन शॉर्टकट में बिना कोई मार्कअप हाथ से लिखे दिखने लगता है।
हर साइज़ पर तीखे आइकन
फ़ेविकॉन बेरहमी से छोटे होते हैं, इसलिए जनरेटर 16, 32 और 48 पिक्सेल पर असली-साइज़ प्रीव्यू रेंडर करता है, ठीक वैसे जैसे एक ब्राउज़र टैब उन्हें दिखाएगा। इससे आप उस लोगो को शिप करने से पहले पकड़ लेते हैं जो 16px पर लुगदी बन जाता है। अगर आपकी सोर्स इमेज चौकोर नहीं है, तो टूल उसे केंद्र-क्रॉप कर देता है ताकि आइकन दबे होने के बजाय संतुलित रहे।
पूरी प्रक्रिया आपकी मूल इमेज से ब्राउज़र में चलती है, यानी आप एक हाई-रिज़ॉल्यूशन लोगो से फ़ेविकॉन PNG और एक ICO बिना किसी अपलोड या अकाउंट के बना सकते हैं।
लोग इसका इस्तेमाल किसलिए करते हैं
एक नई साइट लॉन्च करना — favicon.ico और हर PNG साइज़ एक ही बार में बनाएँ ताकि टैब और बुकमार्क पहले ही दिन तैयार दिखें।
एक PWA इंस्टॉल आइकन जोड़ना — 192 और 512 PNG के साथ एक site.webmanifest एक्सपोर्ट करें ताकि आपका ऐप एक सही होम-स्क्रीन आइकन के साथ इंस्टॉल हो।
Apple टच आइकन — 180x180 apple-touch-icon बनाएँ ताकि iOS बुकमार्क और होम स्क्रीन एक तीखी टाइल दिखाएँ।
किसी मौजूदा साइट को री-ब्रांड करना — जनरेटर के ज़रिए एक नया लोगो बदलें और पूरा आइकन सेट एक ही बार में बदलें।
क्लाइंट हैंडऑफ़ — ico, PNG, manifest और हेड स्निपेट का एक अकेला ZIP सौंपें ताकि डेवलपर बस उसे डाल दे।
छोटे-साइज़ पठनीयता जाँचना — यह पुष्टि करने को असली-साइज़ 16px प्रीव्यू इस्तेमाल करें कि एक बारीक लोगो अब भी एक आइकन के रूप में पढ़ा जाता है।
ग़ैर-चौकोर लोगो — एक चौड़ा वर्डमार्क डालें और केंद्र-क्रॉप को उसे एक संतुलित चौकोर फ़ेविकॉन में बदलने दें।
स्टैटिक साइट या फ़्रेमवर्क प्रोजेक्ट — बने हुए हेड टैग को अपने Next, Astro, या सादे HTML टेम्पलेट में कॉपी करें और शिप करें।
एक image से एक पूरा favicon सेट बनाएँ — ब्राउज़र में, एक ही बार में
एक favicon एक अकेले 16×16 pixel के बाद-के-विचार जैसा लगता है, और सालों तक यह था भी। आधुनिक ब्राउज़रों और प्लेटफ़ॉर्मों ने इसे चुपचाप एक छोटा उत्पादन बना दिया है। आज इसे ठीक से करने के लिए आपको एक favicon.ico, 16px से 512px तक के PNGs का एक फैलाव, iOS home screens के लिए एक Apple touch icon, एक site.webmanifest ताकि साइट एक ऐप के रूप में install हो सके, और आपके HTML <head> में <link> तथा <meta> tags का सही block चाहिए। एक आकार चूकें और आपका tab icon एक retina स्क्रीन पर धुँधला दिखता है; manifest चूकें और "add to home screen" icon एक स्क्रीनशॉट पर लौट जाता है; tag block गलत करें और कुछ प्लेटफ़ॉर्म पूरी चीज़ को अनदेखा कर देते हैं।
यह एक ऐसे काम के लिए बहुत सारा झंझट भरा आउटपुट है जिसे आप प्रति प्रोजेक्ट एक बार करते हैं और फिर विवरण भूल जाते हैं। IMG.DIY एक अकेली स्रोत image लेता है और पूरा सेट बनाता है — .ico, हर PNG आकार, web manifest, और एक copy-paste HTML snippet — पूरी तरह आपके ब्राउज़र में Canvas के साथ resize करते हुए। आपका logo लोकल रूप से पढ़ा जाता है और डिवाइस पर हर लक्ष्य आकार में render होता है; कुछ भी अपलोड नहीं होता। एक ब्रांड अंकन या एक अनरिलीज़ प्रोडक्ट के logo के लिए जिसे आप लॉन्च से पहले किसी तीसरे-पक्ष सर्वर पर पोस्ट नहीं करना चाहेंगे, वह लोकल गारंटी रखने लायक है, और इसकी कोई कीमत नहीं।
क्योंकि पूरी पाइपलाइन client-side चलती है, यह PWA के cache होने के बाद ऑफ़लाइन भी काम करता है, इसलिए आप एक locked-down काम की मशीन पर या बिना कनेक्शन के icons दोबारा बना सकते हैं। मुफ़्त, कोई अकाउंट नहीं, आपके icons में कोई watermark नहीं पका।
इसे अलग क्या बनाता है
- पूरा सेट, केवल एक .ico नहीं। ICO, 16 से 512 तक PNGs, Apple touch icon, और
site.webmanifestएक ही डाउनलोड में। - Copy-paste HTML शामिल। आपके
<head>में गिराने के लिए ठीक<link>/<meta>block, ताकि icons वाकई ब्राउज़रों में register हों। - कुछ अपलोड नहीं। आपका logo लोकल रूप से resize होता है — उपयोगी जब अंकन गोपनीय या प्री-लॉन्च हो।
- एक बार में, कोई wizard नहीं। एक image डालें, सब कुछ पाएँ; कोई बहु-चरण प्रवाह नहीं जो प्लेटफ़ॉर्म चुनाव माँगे जिन्हें फिर आपको शोधना पड़े।
- ऑफ़लाइन और साफ़। Cached PWA, बिना साइन-अप, किसी भी बने icon पर कोई watermark नहीं।
IMG.DIY बनाम अन्य favicon generators
| पहलू | favicon.io | realfavicongenerator.net | मैनुअल (design ऐप + code) | IMG.DIY |
|---|---|---|---|---|
| फ़ाइलें अपलोड | हाँ, उनके सर्वर पर | हाँ, उनके सर्वर पर | नहीं, लोकल | नहीं, ब्राउज़र में रहती हैं |
| पूरा सेट (.ico + PNGs + manifest) | हाँ | हाँ, बहुत संपूर्ण | आप जोड़ते हैं | हाँ |
| HTML snippet दिया गया | हाँ | हाँ, विस्तृत | आप लिखते हैं | हाँ |
| नतीजे तक कदम | कुछ | ज़्यादा (कई विकल्प) | कई | एक बार में |
| ऑफ़लाइन काम करता है | नहीं | नहीं | हाँ | हाँ, पहली विज़िट के बाद |
| कीमत | मुफ़्त | मुफ़्त tier; paid विकल्प | ऐप की कीमत + आपका समय | मुफ़्त |
| अकाउंट ज़रूरी | नहीं | नहीं | नहीं | नहीं |
प्रतिस्पर्धा के बारे में सीधी बात: realfavicongenerator उत्कृष्ट है और वाकई ज़्यादा संपूर्ण — यह आपके icon को असली प्लेटफ़ॉर्मों पर preview करता है, Safari pinned-tab masks और theming जैसे किनारे के मामले संभालता है, और आपको प्रति-प्लेटफ़ॉर्म रूप ट्यून करने देता है। अगर आप उस स्तर का नियंत्रण चाहते हैं और अपनी image अपलोड करने में एतराज़ नहीं करते, तो यह एक बढ़िया विकल्प है। favicon.io तेज़ और सरल है और एक ठोस सेट भी बनाता है। IMG.DIY का अंतर पूर्ण आउटपुट का बिना अपलोड और एक बार में के साथ संयोजन है: आपको वही व्यावहारिक deliverables मिलते हैं — ico, PNGs, manifest, और उन्हें जोड़ने का HTML — बिना आपके logo के ब्राउज़र छोड़े और बिना किसी configuration wizard से गुज़रे। "मेरे पास एक logo है, मुझे paste करने के लिए ज़रूरी सब कुछ दो, और मेरी फ़ाइल कहीं मत भेजो" के लिए, यही मेल है।
IMG.DIY क्यों
पूरा सेट
ICO + 16/32/48/180/192/512 PNG + मैनिफ़ेस्ट।
कॉपी-पेस्ट HTML
सटीक link टैग एक टेक्स्ट फ़ाइल के रूप में शामिल।
असली-साइज़ प्रीव्यू
आइकॉन को पहले असली 16/32/48px पर देखें।
प्राइवेट
आपका लोगो कभी ब्राउज़र से बाहर नहीं जाता।