फ़ेविकॉन जनरेटर
एक इमेज डालें, पूरा favicon पैकेज पाएँ: हर PNG साइज़, एक असली .ico और इसे जोड़ने वाला HTML।
🔒 आपकी फ़ाइलें कभी आपके डिवाइस से बाहर नहीं जातीं
इस फ़ेविकॉन जनरेटर से एक ही इमेज से अपनी साइट के लिए ज़रूरी हर favicon बनाएँ। आधुनिक साइटें एक ही आइकॉन फ़ाइल नहीं इस्तेमाल करतीं; उन्हें कई चाहिए होती हैं: ब्राउज़र टैब के लिए 16 और 32 px, पुराने संदर्भों के लिए 48 px, iPhone होम स्क्रीन के लिए 180 px, और Android व PWA इंस्टॉल के लिए 192 प्लस 512 px। यह टूल इन सबको एक बार में बना देता है, साथ में एक असली मल्टी-रिज़ॉल्यूशन .ico फ़ाइल और वह HTML स्निपेट भी जो पूरे सेट को आपस में जोड़ता है।
सब कुछ आपके ब्राउज़र में लोकली बनता है। आपका लोगो कभी अपलोड नहीं होता, जो तब मायने रखता है जब आप जो साइट बना रहे हैं वह अभी पब्लिक नहीं हुई हो।
किसी स्क्वेयर इमेज से शुरू करें, बेहतर हो 512 px या उससे बड़ी, और हर साइज़ उसी से साफ़-सुथरे तरीके से छोटा किया जाता है। सादे, बोल्ड निशान 16 px तक सिकुड़ने पर भी टिके रहते हैं; बारीक डिटेल और पतला टेक्स्ट टैब साइज़ पर धुंधला हो जाता है, इसीलिए सादे किए गए लोगो से बने favicon हमेशा सबसे शार्प दिखते हैं।
favicon कैसे बनाएँ
- बेहतरीन नतीजे के लिए एक स्क्वेयर इमेज, 512x512 या उससे बड़ी, ड्रॉप करें।
- देखें कि आइकॉन छोटे टैब साइज़ पर कैसा दिखता है।
- Generate पर क्लिक करके सभी PNG साइज़ और .ico फ़ाइल बनाएँ।
- favicon पैकेज डाउनलोड करें।
- दिया गया HTML स्निपेट अपनी साइट के head सेक्शन में कॉपी करें और फ़ाइलें अपलोड करें।
पैकेज में क्या है और हर फ़ाइल कहाँ इस्तेमाल होती है
आपको 16, 32, 48, 180, 192 और 512 पिक्सल के PNG मिलते हैं, साथ में favicon.ico। 16 और 32 px फ़ाइलें ब्राउज़र टैब और बुकमार्क कवर करती हैं; 180 px वह apple-touch-icon है जो तब दिखता है जब कोई आपकी साइट को iPhone होम स्क्रीन पर जोड़ता है; 192 और 512 px Android और PWA मेनिफ़ेस्ट के लिए हैं। .ico फ़ाइल कई रिज़ॉल्यूशन एक ही फ़ाइल में समेटती है और डिफ़ॉल्ट रूप से /favicon.ico पर वही फ़ॉर्मेट रहती है जिसे कुछ ब्राउज़र और पुराने सिस्टम माँगते हैं।
बना हुआ HTML स्निपेट हर आइकॉन को सही rel और sizes एट्रिब्यूट के साथ घोषित करता है। इसे अपने head एलिमेंट में पेस्ट करें, फ़ाइलों को उन्हीं पाथ पर रखें जिन्हें यह रेफ़र करता है, और हर प्लेटफ़ॉर्म अपने-आप अपना मनचाहा साइज़ चुन लेगा।
अब एक ही favicon फ़ाइल क्यों काफ़ी नहीं
पुरानी दुनिया आपकी साइट रूट पर एक favicon.ico थी। आज एक ब्राउज़र टैब को 16 या 32 px का आइकॉन चाहिए, एक iPhone होम-स्क्रीन शॉर्टकट को 180 px का apple-touch-icon चाहिए, और Android पर एक इंस्टॉल होने योग्य वेब ऐप (PWA) को अपने मेनिफ़ेस्ट में घोषित 192 और 512 px के PNG चाहिए। सिर्फ़ एक साइज़ भेजें और इनमें से कुछ किसी ख़ाली या धुंधले डिफ़ॉल्ट पर लौट जाते हैं।
इसीलिए यह टूल एक ही फ़ाइल के बजाय पूरा सेट देता है। हर प्लेटफ़ॉर्म अपनी ज़रूरत का साइज़ उठाता है, तो आपका निशान टैब में शार्प, होम स्क्रीन पर क्रिस्प, और साइट को ऐप के रूप में इंस्टॉल करने पर सही दिखता है — बजाय इसके कि एक ही इमेज उन कामों को ढकने के लिए खींची जाए जिनके लिए उसका साइज़ बना ही नहीं था।
पूरा सेट आपके डिवाइस पर कैसे बनता है
आपकी सोर्स इमेज से शुरू करते हुए, टूल उसे हर ज़रूरी डाइमेंशन पर एक canvas पर बनाता है और Canvas API का इस्तेमाल करके हर साइज़ के लिए एक PNG एक्सपोर्ट करता है। .ico के लिए, यह उनमें से कई रिज़ॉल्यूशन को एक असली ICO कंटेनर में पैक करता है — असली मल्टी-इमेज फ़ॉर्मेट, न कि एक्सटेंशन बदला हुआ PNG।
यह .ico वाला फ़र्क़ इसलिए मायने रखता है क्योंकि कुछ ब्राउज़र और पुराने सिस्टम प्रथा के मुताबिक /favicon.ico माँगते हैं और फ़ाइल का असली फ़ॉर्मेट जाँचते हैं; नकली फ़ाइल रिजेक्ट हो जाती है। सारी रिसाइज़िंग और ICO एनकोडिंग आपके ब्राउज़र में लोकली चलती है, इसलिए पूरा पैकेज बिना कुछ अपलोड हुए तैयार हो जाता है।
आपकी ब्रांडिंग कभी अपलोड नहीं होती
अक्सर आप favicon जल्दी बना लेते हैं, जब साइट अभी डेवलपमेंट में हो और उसका लोगो गोपनीय या अनरिलीज़ हो सकता है। उस निशान को किसी ऑनलाइन favicon सेवा पर अपलोड करने का मतलब है लॉन्च से पहले ही अपनी ब्रांडिंग किसी थर्ड पार्टी को सौंप देना।
यहाँ इमेज पेज में पढ़ी जाती है और हर फ़ाइल आपके ब्राउज़र की मेमोरी में बनती है, इसलिए लोगो आपकी मशीन पर ही रहता है। पैकेज डाउनलोड करें, इसे अपने प्रोजेक्ट में डालें, और आपके अपने कंप्यूटर के सिवा कहीं कोई कॉपी कभी मौजूद ही नहीं रही।
ऐसा निशान डिज़ाइन करना जो 16 पिक्सल में टिके
एक favicon अक्सर 16 px पर दिखता है — एक अकेले अक्षर से बमुश्किल बड़ा। डिटेल वाले लोगो, पतली रेखाएँ और पूरे wordmark उस साइज़ पर धुंधले हो जाते हैं, इसीलिए ज़्यादातर ब्रांड अपने favicon के लिए पूरे लोगो के बजाय एक सादा प्रतीक, एक monogram, या एक बोल्ड अक्षर इस्तेमाल करते हैं।
कम-से-कम 512 px की स्क्वेयर इमेज से शुरू करें ताकि हर साइज़ किसी साफ़ सोर्स से छोटा हो, हाई कंट्रास्ट और मोटी आकृतियों को तरजीह दें, और शिप करने से पहले 16 px नतीजा परखने के लिए छोटे-साइज़ प्रीव्यू का इस्तेमाल करें। ब्राउज़र टैब में आमतौर पर ट्रांसपेरेंट बैकग्राउंड सबसे अच्छा दिखता है, जो निशान को हल्की या गहरी थीम के सामने साफ़-सुथरा बैठने देता है।
इसे अपनी साइट में सही ढंग से जोड़ना
फ़ाइलें बनाना आधा काम है — उन्हें घोषित भी करना होता है। टूल आपको सही link टैग वाला एक HTML स्निपेट देता है: PNG के लिए rel और sizes एट्रिब्यूट, iOS के लिए apple-touch-icon link, और favicon.ico का रेफ़रेंस। इसे अपने पेजों के head में पेस्ट करें और फ़ाइलों को उन्हीं पाथ पर रखें जिन्हें यह रेफ़र करता है।
favicon.ico को साइट रूट पर रखें, क्योंकि ब्राउज़र बिना link टैग के भी प्रथा के मुताबिक ठीक वही पाथ माँगते हैं। नया favicon 'दिखता नहीं' — इसकी एक आम वजह बस आक्रामक ब्राउज़र कैशिंग होती है; कुछ ग़लत मानने से पहले हार्ड-रिफ़्रेश करें या किसी प्राइवेट विंडो में जाँचें, क्योंकि टैब आइकॉन ज़िद्दी तरीके से कैश हो सकते हैं।
favicon जनरेटर कौन इस्तेमाल करता है
कोई भी जो साइट लॉन्च या रीब्रांड कर रहा हो — डेवलपर, डिज़ाइनर, छोटे-कारोबारी, कोई साइड प्रोजेक्ट या लैंडिंग पेज भेजने वाले लोग। जिस पल आप ब्राउज़र टैब में डिफ़ॉल्ट ग्लोब के बजाय अपना आइकॉन चाहते हैं, आपको कम-से-कम टैब साइज़ चाहिए; और जिस पल आप चाहते हैं कि फोन पर सेव होने पर यह सही दिखे, आपको बड़े साइज़ भी चाहिए।
यह किसी मौजूदा साइट का ऑडिट करते वक़्त भी उपयोगी है, जिसने कभी सिर्फ़ एक अकेला 16 px आइकॉन भेजा हो, या जिसमें apple-touch-icon न हो और अब मोबाइल होम स्क्रीन पर टूटी दिखे। मौजूदा लोगो से पूरा सेट दोबारा बनाएँ, head स्निपेट अपडेट करें, और हर प्लेटफ़ॉर्म फिर से कवर हो जाता है।
अक्सर पूछे जाने वाले सवाल
क्या यह फ़ेविकॉन जनरेटर फ्री है?
हाँ, बिना साइन-अप के फ्री। जितने चाहें प्रोजेक्ट के लिए favicon सेट बनाएँ।
क्या मेरा लोगो कहीं अपलोड होता है?
नहीं। सारी रिसाइज़िंग और .ico एनकोडिंग आपके ब्राउज़र में होती है, इसलिए बिना रिलीज़ हुई ब्रांडिंग आपकी मशीन पर ही रहती है।
क्या मुझे वाक़ई एक सही .ico फ़ाइल मिलती है?
हाँ, एक असली मल्टी-रिज़ॉल्यूशन .ico, न कि सिर्फ़ एक्सटेंशन बदला हुआ PNG। यह फ़र्क़ मायने रखता है क्योंकि कुछ सॉफ़्टवेयर फ़ाइल फ़ॉर्मेट जाँचते हैं और नकली .ico फ़ाइलें रिजेक्ट कर देते हैं।
मुझे किस इमेज से शुरू करना चाहिए?
कम से कम 512x512 का एक स्क्वेयर PNG, सादे और हाई-कंट्रास्ट डिज़ाइन के साथ। ट्रांसपेरेंट बैकग्राउंड सपोर्टेड हैं और आमतौर पर ब्राउज़र टैब में सबसे अच्छे दिखते हैं।
16 पिक्सल पर मेरा लोगो ख़राब क्यों दिखता है?
सोलह पिक्सल बहुत छोटा है; wordmark और डिटेल वाले लोगो इसमें टिक नहीं पाते। ज़्यादातर ब्रांड अपने favicon के लिए एक सादा प्रतीक या एक अक्षर इस्तेमाल करते हैं। शिप करने से पहले छोटे-साइज़ प्रीव्यू से जाँच लें।
क्या ये साइज़ iPhone होम स्क्रीन और Android PWA कवर करते हैं?
हाँ। 180 px आइकॉन ठीक वही है जो iOS 'Add to Home Screen' के लिए इस्तेमाल करता है, और 192 व 512 px PNG वही दो साइज़ हैं जिनकी Android और वेब ऐप मेनिफ़ेस्ट अपेक्षा करते हैं।