Favicon जनरेटर
एक इमेज से हर favicon साइज़, असली मल्टी-साइज़ .ico और वेब मैनिफ़ेस्ट। सब कुछ लोकल तौर पर चलता है — कुछ भी अपलोड नहीं होता।
- इनपुट
- PNG · JPEG · WebP · SVG
- आउटपुट
- ICO · PNG · webmanifest · ZIP
अपना लोगो डालें
PNG, JPEG, WebP या SVG। वर्गाकार और कम से कम 512 × 512 px सबसे अच्छा रहता है। आप इमेज चिपका भी सकते हैं।
एक इमेज से हर favicon फ़ाइल
यह favicon जनरेटर एक ही लोगो को वह पूरा सेट बना देता है जिसकी आज किसी वेबसाइट को ज़रूरत होती है: 16, 32 और 48 पिक्सेल आइकन वाला favicon.ico, 16 से 512 पिक्सेल तक की साफ़ PNG, Apple touch icon, Android Chrome आइकन, एक site.webmanifest और आपके पेज में चिपकाने के लिए HTML टैग। आर्टवर्क को वर्गाकार करें, पैडिंग जोड़ें, कोने गोल करें या उसे ठोस टाइल पर रखें, फिर सब कुछ एक ZIP में डाउनलोड करें। आकार बदलना और ZIP बनाना आपके डिवाइस पर होता है, इसलिए आपका लोगो कहीं अपलोड नहीं होता।
favicon कैसे बनाएँ
- पेज पर PNG, JPEG, WebP या SVG डालें, या चिपकाएँ। कम से कम 512 × 512 पिक्सेल का वर्गाकार लोगो, या SVG, सबसे साफ़ नतीजा देता है।
- पूरी इमेज को चारों ओर जगह के साथ रखने के लिए Fit चुनें, या उसे वर्ग में क्रॉप करने के लिए Fill। गोल टाइल चाहिए तो पैडिंग और कॉर्नर रेडियस जोड़ें।
- बैकग्राउंड रंग चुनें, या उसे पारदर्शी रखें। Apple touch icon को हमेशा ठोस बैकग्राउंड मिलता है, क्योंकि iOS पारदर्शिता को काला कर देता है।
- वेब मैनिफ़ेस्ट के लिए ऐप का नाम और रंग भरें, फिर ZIP डाउनलोड करें दबाएँ, या प्रीव्यू से अलग-अलग फ़ाइलें डाउनलोड करें।
- फ़ाइलों को अपनी साइट के रूट में अपलोड करें और HTML टैग हर पेज के
<head>में चिपकाएँ।
आधुनिक ब्राउज़र को असल में कौन-सी favicon फ़ाइलें चाहिए?
favicon की सलाह 2012 के बचे-खुचे नियमों से भरी है: दर्जनों साइज़, Windows टाइल XML और Safari pinned-tab मास्क। आज के ब्राउज़र इससे कहीं कम ढूँढते हैं। चार फ़ाइलें इस्तेमाल में मौजूद लगभग हर ब्राउज़र, फ़ोन और ऑपरेटिंग सिस्टम को कवर कर लेती हैं।
ZIP में बाकी सब पूर्णता के लिए है: 16, 32 और 48 पिक्सेल की PNG उन टूल और CMS के लिए जो उन्हें नाम से माँगते हैं, और पुराने pinned sites के लिए वैकल्पिक 150 × 150 Windows टाइल। अतिरिक्त फ़ाइलों से कोई नुकसान नहीं, लेकिन उन सबको लिंक करने की ज़रूरत नहीं है।
- favicon.ico
- सार्वभौमिक फ़ॉलबैक। ब्राउज़र /favicon.ico खुद माँगते हैं, भले ही कोई टैग उसकी ओर इशारा न करे, और RSS रीडर, बुकमार्क मैनेजर और क्रॉलर भी यही करते हैं। एक फ़ाइल में 16, 32 और 48 पिक्सेल संस्करण होते हैं, और हर एक ICO कंटेनर के अंदर PNG है, जिसे Windows Vista के बाद का हर ब्राउज़र पढ़ता है।
- icon.svg
- वेक्टर favicon जो हर साइज़ और ज़ूम लेवल पर साफ़ रहता है। लिंक होने पर Chrome, Edge, Firefox और Safari के हाल के संस्करण इसे इस्तेमाल करते हैं। यह आपको तभी मिलता है जब आप SVG से शुरू करें; रास्टर इमेज असली वेक्टर नहीं बन सकती।
- apple-touch-icon.png
- 180 × 180 की अपारदर्शी PNG जो iPhone और iPad तब दिखाते हैं जब कोई आपकी साइट को होम स्क्रीन पर जोड़ता है। iOS अपना गोल मास्क लगाता है, इसलिए कोने वर्गाकार और बैकग्राउंड ठोस होना चाहिए।
- मैनिफ़ेस्ट आइकन
- site.webmanifest में सूचीबद्ध 192 और 512 पिक्सेल की PNG। Android इन्हें होम-स्क्रीन शॉर्टकट और इंस्टॉल किए गए वेब ऐप की स्प्लैश स्क्रीन के लिए इस्तेमाल करता है, और Chrome किसी साइट को इंस्टॉल करने का विकल्प देने से पहले इन्हें जाँचता है।
चिपकाने के लिए HTML टैग
स्निपेट ICO को sizes="any" के बजाय sizes="32x32" के साथ लिंक करता है। "any" के साथ Chrome SVG उपलब्ध होने पर भी ICO को प्राथमिकता देता है। जब आप SVG अपलोड करते हैं, तो स्निपेट उसे भी लिंक करता है, ताकि SVG favicon सपोर्ट करने वाले ब्राउज़र उसे इस्तेमाल करें और बाकी ICO पर लौट आएँ। SVG न हो तो उसकी जगह 32 और 16 पिक्सेल की PNG लिंक होती हैं।
theme-color मेटा टैग Android और Safari में ब्राउज़र टूलबार को रंग देता है, और site.webmanifest में आपके ऐप का नाम, रंग और बड़े आइकन होते हैं। फ़ाइल नाम जैसे हैं वैसे रखें और हर फ़ाइल अपने डोमेन के रूट में रखें, या स्निपेट के पाथ को वहाँ के हिसाब से बदलें जहाँ आपने उन्हें रखा है।
ऐसा favicon डिज़ाइन करना जो 16 पिक्सेल पर भी टिके
- सरल रखें। 16 × 16 आइकन कुल 256 पिक्सेल का होता है। वर्डमार्क और बारीक रेखाएँ धुँधली हो जाती हैं; एक अक्षर, एक चिह्न या बिना टेक्स्ट का लोगो मार्क कहीं बेहतर पढ़ा जाता है।
- ऐसा कंट्रास्ट रखें जो दोनों टैब रंगों पर चले। थीम के हिसाब से ब्राउज़र टैब हल्के या गहरे होते हैं। प्रीव्यू हर साइज़ को सफ़ेद और लगभग काली टाइल पर दिखाता है, ताकि डार्क मोड में गायब होने वाला गहरा लोगो आप शिप करने से पहले पकड़ सकें।
- शक हो तो टाइल दें। थोड़ी पैडिंग और कॉर्नर रेडियस वाला ठोस बैकग्राउंड पतले या पारदर्शी लोगो को किसी भी टैब पर दिखता रखता है और होम स्क्रीन पर सोचा-समझा लगता है।
- बड़े से शुरू करें। साफ़ किनारों के लिए इमेज को आधा-आधा करके छोटा किया जाता है, लेकिन जो डिटेल सोर्स में नहीं है उसे कुछ भी नहीं जोड़ सकता। 512 पिक्सेल या उससे ज़्यादा दें, या SVG।
- रंग जाँचें। अगर आपका ब्रांड रंग सफ़ेद या गहरे टैब पर बहुत फीका है, तो उसे कंट्रास्ट चेकर से टेस्ट करें, या किसी दूसरे नोटेशन में मिले मान को कलर कनवर्टर से बदलें।
अपलोड क्यों नहीं होता
ज़्यादातर favicon जनरेटर आकार बदलने के लिए आपका लोगो सर्वर पर भेजते हैं। यह आपके ब्राउज़र में कैनवस पर हर साइज़ बनाता है, ICO फ़ाइल को JavaScript में बाइट-दर-बाइट लिखता है और एक छोटे WebAssembly मॉड्यूल से ZIP बनाता है, इसलिए इमेज आपके डिवाइस से बाहर नहीं जाती और पेज लोड होने के बाद टूल ऑफ़लाइन भी काम करता है। यह किसी अनरिलीज़्ड ब्रांड या क्लाइंट के ऐसे लोगो के लिए मायने रखता है जिसे अभी साझा नहीं करना है।
अक्सर पूछे जाने वाले सवाल
- favicon का साइज़ कितना होना चाहिए?
- ब्राउज़र टैब favicon को 16 × 16 CSS पिक्सेल पर दिखाते हैं, जो हाई-डेंसिटी स्क्रीन पर 32 × 32 होता है, इसलिए ICO में 16, 32 और 48 पिक्सेल संस्करण होते हैं। 180 × 180 का Apple touch icon और वेब मैनिफ़ेस्ट के लिए 192 और 512 पिक्सेल आइकन जोड़ें, तो हर आम स्थिति कवर हो जाती है। कम से कम 512 × 512 पिक्सेल की इमेज से शुरू करें।
- क्या अब भी favicon.ico फ़ाइल चाहिए?
- हाँ। ब्राउज़र, फ़ीड रीडर और क्रॉलर /favicon.ico अपने आप माँगते हैं, भले ही कोई टैग उसकी ओर इशारा न करे, और पुराने ब्राउज़र सिर्फ़ ICO समझते हैं। SVG और PNG आइकन के साथ एक ICO अपनी साइट के रूट में रखें।
- क्या SVG को favicon के रूप में इस्तेमाल कर सकते हैं?
- हाँ। Chrome, Edge, Firefox और हाल के Safari type="image/svg+xml" वाले link टैग से SVG favicon सपोर्ट करते हैं। यहाँ SVG अपलोड करें, वह ICO फ़ॉलबैक के साथ icon.svg के रूप में शामिल होता है, और HTML स्निपेट दोनों को लिंक करता है।
- apple-touch-icon क्या है?
- यह 180 × 180 पिक्सेल की PNG है जिसे iPhone या iPad तब इस्तेमाल करता है जब कोई आपकी वेबसाइट को होम स्क्रीन पर जोड़ता है। इसका बैकग्राउंड ठोस और कोने वर्गाकार होने चाहिए, क्योंकि iOS कोने खुद गोल करता है और पारदर्शी हिस्सों को काला कर देता है।
- मेरा favicon दिख क्यों नहीं रहा?
- ब्राउज़र favicon को ज़ोर से कैश करते हैं, अक्सर कई दिनों तक। जाँचें कि फ़ाइल आपके link टैग के पाथ पर मिल रही है, फिर हार्ड-रिफ़्रेश करें या साइट को प्राइवेट विंडो में खोलें। फ़ाइल का नाम बदलने या favicon.ico?v=2 जैसी वर्ज़न क्वेरी जोड़ने से नया डाउनलोड होता है।
- PNG को ICO में कैसे बदलें?
- PNG को इस पेज पर डालें और favicon.ico डाउनलोड करें। जनरेटर उसे 16, 32 और 48 पिक्सेल में बदलकर तीनों को एक ICO फ़ाइल में पैक करता है, और हर साइज़ कंटेनर के अंदर PNG के रूप में रहता है।
- site.webmanifest किस काम आती है?
- यह एक छोटी JSON फ़ाइल है जो Android और Chrome को आपकी साइट का नाम, थीम रंग, बैकग्राउंड रंग और वे 192 व 512 पिक्सेल आइकन बताती है जो साइट को होम स्क्रीन पर जोड़ने या ऐप के रूप में इंस्टॉल करने पर इस्तेमाल होते हैं।
- क्या मेरा लोगो सर्वर पर अपलोड होता है?
- नहीं। हर आइकन आपके ब्राउज़र में बनाया और एन्कोड किया जाता है और ZIP आपके डिवाइस पर बनती है। कुछ भी कहीं नहीं भेजा जाता, और लोड होने के बाद पेज ऑफ़लाइन भी काम करता है।