ऑनलाइन मुफ़्त Favicon कैसे बनाएँ (2026 गाइड)

ब्राउज़र टैब में वह छोटा आइकन — पेज शीर्षक के बगल वाला — favicon कहलाता है, और यह आपकी वेबसाइट पर सबसे छोटे ब्रांडिंग निर्णयों में से एक है। बिना इसके साइटें एक सामान्य खाली-पेज आइकन दिखाती हैं, जो आगंतुकों को चुपचाप "अधूरा" होने का संकेत देता है। अच्छी खबर: favicon बनाना लगभग एक मिनट का काम है। यह गाइड दिखाती है कि हमारे मुफ़्त फेविकॉन जनरेटर से किसी भी छवि को ठीक आकार के favicon के सेट में कैसे बदलें, और उन्हें अपनी वेबसाइट में कैसे जोड़ें।

Favicon क्या है, और यह क्यों मायने रखता है?

Favicon ("पसंदीदा आइकन" का संक्षिप्त रूप) वह छोटी छवि है जो ब्राउज़र टैब, बुकमार्क, इतिहास सूचियों और कभी-कभी खोज परिणामों में दिखाते हैं। यह आमतौर पर सिर्फ 16×16 पिक्सल पर दिखाई जाती है — बहुत छोटी — लेकिन यह आपकी साइट के हर पेज पर दिखती है। कस्टम favicon आपकी टैब को एक नज़र में पहचानने योग्य बनाता है, उपयोगकर्ताओं को बीस खुले टैब में आपकी साइट खोजने में मदद करता है, और तैयार वेबसाइट के पेशेवर रूप को पूरा करता है।

आपको डिज़ाइनर होने की ज़रूरत नहीं है। एक साधारण बोल्ड आकार, रंगीन पृष्ठभूमि पर एक अक्षर, या आपके लोगो का सरल संस्करण इन आकारों में पूरी तरह काम करता है।

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

फेविकॉन जनरेटर आपकी अपलोड की गई किसी भी छवि को लेता है और चार मानक आकारों में favicon PNG बनाता है:

• 16×16 — क्लासिक ब्राउज़र टैब और बुकमार्क आइकन आकार।
• 32×32 — आधुनिक ब्राउज़र द्वारा उच्च-घनत्व डिस्प्ले पर टैब और टास्कबार शॉर्टकट के लिए उपयोग किया जाता है।
• 48×48 — कुछ सिस्टम पर डेस्कटॉप शॉर्टकट के लिए उपयोग किया जाता है।
• 180×180 — Apple touch icon आकार, जो तब दिखता है जब कोई आपकी साइट को अपने iPhone या iPad होम स्क्रीन पर सहेजता है।

सब कुछ आपके ब्राउज़र में होता है — आपकी स्रोत छवि कभी किसी सर्वर पर अपलोड नहीं होती।

चरण-दर-चरण: अपने Favicon बनाएँ

1. स्रोत छवि चुनें। कुछ साधारण और बोल्ड चुनें: लोगो चिह्न, प्रारंभिक अक्षर, या साफ़ आइकन। वर्गाकार छवियाँ सबसे अच्छी काम करती हैं। विस्तृत तस्वीरों से बचें — 16 पिक्सल पर विवरण गायब हो जाता है।
2. फेविकॉन जनरेटर खोलें। यह किसी भी आधुनिक ब्राउज़र में चलता है; कुछ भी इंस्टॉल नहीं करना है।
3. अपनी छवि अपलोड करें। अपने डिवाइस से फ़ाइल चुनें। टूल पूरी तरह स्थानीय रहता है — कुछ भी प्रसारित नहीं होता।
4. आइकन सेट बनाएँ। टूल आपकी छवि के 16, 32, 48 और 180px PNG संस्करण बनाता है।
5. फ़ाइलें डाउनलोड करें। प्रत्येक आकार सहेजें। फ़ाइल नाम साधारण और सुसंगत रखें, उदाहरण के लिए favicon-16.png, favicon-32.png, favicon-48.png और apple-touch-icon.png।
6. उन्हें अपनी वेबसाइट पर अपलोड करें। फ़ाइलों को अपनी साइट की रूट डायरेक्टरी या images फ़ोल्डर में रखें, अपनी अन्य साइट फ़ाइलों के साथ।
7. HTML जोड़ें (नीचे देखें)। अपने पेजों के <head> में आइकनों का संदर्भ दें ताकि ब्राउज़र जान सकें कि उनका उपयोग करना है।

अपनी वेबसाइट में Favicon जोड़ना: HTML

एक बार आपकी आइकन फ़ाइलें आपके सर्वर पर आ जाएँ, अपने HTML पेजों के <head> खंड के अंदर ये पंक्तियाँ जोड़ें (पथों को उस जगह के अनुसार समायोजित करें जहाँ आपने फ़ाइलें रखी हैं):

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

ब्राउज़र अपने आप वह आकार चुनते हैं जिसकी उन्हें ज़रूरत है। apple-touch-icon वाली पंक्ति iPhone और iPad को कवर करती है जब आगंतुक आपकी साइट को अपनी होम स्क्रीन पर जोड़ते हैं। अगर आपकी साइट साझा हेडर टेम्पलेट का उपयोग करती है, तो ये पंक्तियाँ एक बार जोड़ें और हर पेज को favicon मिल जाता है।

दिख नहीं रहा? ब्राउज़र favicon को आक्रामक रूप से कैश करते हैं। अपना जोड़ने के बाद, हार्ड रिफ्रेश करें (Windows पर Ctrl+Shift+R, Mac पर Cmd+Shift+R) या जाँचने के लिए निजी विंडो में पेज खोलें।

डिज़ाइन टिप्स: अच्छा Favicon क्या बनाता है

• इसे बेहद साधारण रखें। 16×16 पिक्सल पर विवरण की कोई जगह नहीं है। एक अक्षर, एक साधारण आकार, या दो-रंग का चिह्न हर बार पूरे लोगो को हरा देता है।
• उच्च कंट्रास्ट का उपयोग करें। ठोस रंगीन वर्ग पर सफ़ेद अक्षर साफ़ पढ़ा जाता है; सफ़ेद पर पतली भूरी रेखाएँ गायब हो जाती हैं।
• वास्तविक आकार पर परीक्षण करें। अपनी स्रोत छवि को मन में 16 पिक्सल चौड़ा सिकोड़ें — अगर आप नहीं बता सकते कि यह क्या है, तो बनाने से पहले इसे सरल करें।
• अपने ब्रांड रंग से मिलाएँ। अपनी साइट के प्राथमिक रंग को favicon पृष्ठभूमि के रूप में उपयोग करने से टैब आइकन तुरंत आपके ब्रांड से जुड़ जाता है।
• पारदर्शिता किनारों से बचें। अगर आपके स्रोत में पारदर्शी पृष्ठभूमि है, तो सुनिश्चित करें कि दृश्य आकार छोटा करने पर भी बोल्ड रहे — 16px पर फीके किनारे भूरे धब्बे में बदल जाते हैं।
• सभी आकारों में एक अवधारणा। सभी आकारों के लिए एक ही स्रोत छवि का उपयोग करें ताकि आपका टैब आइकन, बुकमार्क आइकन और होम-स्क्रीन आइकन पहचानने योग्य रूप से एक ही चिह्न हों।

बचने योग्य आम गलतियाँ

• पूरा विस्तृत लोगो उपयोग करना। टैगलाइन वाला लोगो favicon आकार पर अपठनीय धब्बा बन जाता है। सिर्फ आइकन या प्रारंभिक अक्षर निकालें।
• Apple touch icon भूलना। 180px संस्करण वही है जो iPhone उपयोगकर्ता तब देखते हैं जब वे आपकी साइट को अपनी होम स्क्रीन पर सहेजते हैं — इसे न छोड़ें।
• HTML में ग़लत फ़ाइल पथ। अगर favicon नहीं दिखता, तो सबसे आम कारण वह पथ है जो फ़ाइलों की वास्तविक जगह से मेल नहीं खाता। href मानों को दोबारा जाँचें।
• सिर्फ एक ब्राउज़र में परीक्षण करना। अपना टैब आइकन कम से कम Chrome और एक अन्य ब्राउज़र में जाँचें, और अगर हो सके तो फ़ोन होम-स्क्रीन सहेजकर भी।

आपकी प्राइवेसी: छवियाँ कभी आपके डिवाइस से बाहर नहीं जातीं

आपका लोगो आपका ब्रांड है — इसे किसी अनजान favicon साइट पर अपलोड करने का अर्थ है अपनी कलाकृति किसी अजनबी के सर्वर को सौंपना। फेविकॉन जनरेटर JavaScript से सब कुछ स्थानीय रूप से आपके ब्राउज़र में प्रोसेस करता है। कुछ भी अपलोड, संग्रहीत या लॉग नहीं होता।

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

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

हाँ — कोई साइनअप नहीं, कोई सीमा नहीं, और आपके द्वारा डाउनलोड किए गए आइकन किसी भी वेबसाइट पर उपयोग के लिए आपके हैं।

मुझे किस छवि से शुरुआत करनी चाहिए?

अपने लोगो चिह्न या साधारण आइकन का वर्गाकार PNG, आदर्श रूप से कम से कम 512×512 पिक्सल। बड़ी, साफ़ स्रोत छवियाँ छोटी छवियों की तुलना में बेहतर छोटी होती हैं।

क्या मुझे अभी भी .ico फ़ाइल चाहिए?

आधुनिक ब्राउज़र सभी PNG favicon स्वीकार करते हैं, जो यही टूल बनाता है। क्लासिक favicon.ico प्रारूप अभी भी काम करता है लेकिन वर्तमान ब्राउज़र के लिए अब आवश्यक नहीं है।

मेरा नया Favicon क्यों नहीं दिख रहा है?

लगभग हमेशा कैशिंग। पेज को हार्ड-रिफ्रेश करें, साइट के लिए अपने ब्राउज़र कैश को साफ़ करें, या गुप्त विंडो में परीक्षण करें। अपने HTML <link> टैग में फ़ाइल पथ भी सत्यापित करें।

अभी अपना Favicon बनाएँ: मुफ़्त फेविकॉन जनरेटर · मुफ़्त इमेज कंप्रेसर · मुफ़्त कलर पिकर