सारांश: मुफ़्त favicon जनरेटर एक वर्गाकार इमेज को उन छह PNG आइकन में बदल देता है जिनकी किसी साइट को ज़रूरत होती है: ब्राउज़र टैब के लिए 16x16 और 32x32, Apple डिवाइस के लिए 180x180, Android और इंस्टॉल की गई वेब ऐप्स के लिए 192x192 और 512x512, और Windows टाइल के लिए 150x150। यह आपके <head> के लिए HTML टैग और एक तैयार site.webmanifest भी लिखता है। सब कुछ आपके ब्राउज़र में चलता है: आपकी इमेज कभी अपलोड नहीं होती।
एक favicon जनरेटर किसी वेबसाइट की ब्रांडिंग का सबसे उबाऊ हिस्सा आसान बना देता है: एक ही लोगो को छह आकारों में एक्सपोर्ट करना, हर फ़ाइल का सही नाम रखना और वे टैग लिखना जो हर प्लेटफ़ॉर्म को बताते हैं कि फ़ाइलें कहाँ मिलेंगी। favicon छोटा होता है, पर उसकी पहुँच दूर तक है। वह ब्राउज़र टैब, बुकमार्क और इतिहास में दिखता है, फ़ोन की होम स्क्रीन पर रहता है, और Google के नतीजों में आपकी साइट के नाम के बगल में भी दिखता है। वहाँ Google कम से कम 8x8 पिक्सल का वर्गाकार आइकन माँगता है और 48x48 से बड़े आकार की सलाह देता है (Google Search Central, खोज नतीजों में favicon).
favicon जनरेटर का इस्तेमाल कैसे करें?
PNG, JPG या SVG फ़ाइल टूल में डालें, आदर्श रूप से 512x512 पिक्सल या उससे बड़ी। जनरेटर आपकी इमेज को हर आकार पर उच्च गुणवत्ता की स्मूदिंग के साथ कैनवास पर बनाता है और छहों नतीजे साथ-साथ दिखाता है।
- एक वर्गाकार सोर्स तैयार करें। टूल आपकी इमेज को बिना काटे हर वर्गाकार आकार में बदलता है, इसलिए आयताकार लोगो खिंचा हुआ दिखेगा। पहले उसे वर्गाकार काटें, निशान के चारों ओर थोड़ा हाशिया रखते हुए।
- फ़ाइल डालें या उसे चुनने के लिए क्लिक करें। कुछ ही सेकंड में प्रीव्यू दिख जाएगा।
- पैकेज डाउनलोड करें “Download all (.zip)” बटन से, या हर PNG अलग से।
- HTML कोड कॉपी करें हर पेज के
<head>में, आमतौर पर आपके साइट टेम्पलेट में। - मेनिफ़ेस्ट कॉपी करें, उसके
nameऔरshort_nameफ़ील्ड में अपना ब्रांड भरें, और उसे अपनी साइट की रूट डायरेक्टरी मेंsite.webmanifestनाम से सेव करें। - फ़ाइलें रूट पर अपलोड करें अपने डोमेन के, ताकि
/favicon-32x32.pngऔर कोड के बाकी पाथ सही जगह पहुँचें।
चूँकि प्रोसेसिंग आपके ब्राउज़र में होती है, यह जनरेटर अभी जारी न हुए लोगो और उन क्लाइंट फ़ाइलों के साथ भी काम करता है जिन्हें आप किसी तीसरे पक्ष के सर्वर पर नहीं भेज सकते।
2026 में किन favicon आकारों की ज़रूरत है?
छह PNG फ़ाइलें ब्राउज़र, iOS, Android और Windows को कवर करती हैं। नीचे की तालिका बताती है कि जनरेटर क्या बनाता है, हर फ़ाइल कहाँ इस्तेमाल होती है और कौन-सा टैग या फ़ाइल उसे रेफ़र करता है।
| फ़ाइल | आकार | कहाँ दिखती है | किससे रेफ़र होती है |
|---|---|---|---|
| favicon-16x16.png | 16x16 | सामान्य स्क्रीन पर ब्राउज़र टैब, बुकमार्क | <link rel="icon" sizes="16x16"> |
| favicon-32x32.png | 32x32 | हाई-डेंसिटी (Retina) स्क्रीन पर ब्राउज़र टैब, टास्कबार शॉर्टकट | <link rel="icon" sizes="32x32"> |
| apple-touch-icon.png | 180x180 | जब विज़िटर आपकी साइट जोड़ता है तो iPhone की होम स्क्रीन | <link rel="apple-touch-icon"> |
| android-chrome-192x192.png | 192x192 | Android होम स्क्रीन और ऐप लॉन्चर | site.webmanifest |
| android-chrome-512x512.png | 512x512 | इंस्टॉल की गई वेब ऐप की स्प्लैश स्क्रीन, ब्राउज़र के ऐप स्टोर | site.webmanifest |
| mstile-150x150.png | 150x150 | पुराने Windows वर्शन पर पिन की गई साइट टाइल | <meta name="msapplication-TileImage"> |
192 और 512 की जोड़ी मनमाने ढंग से नहीं चुनी गई है: Chromium ब्राउज़रों के लिए वेब ऐप मेनिफ़ेस्ट में कम से कम 192x192 और 512x512 आइकन होने चाहिए, और Chrome बाकी जगहों के लिए उन्हें खुद स्केल करता है (web.dev, वेब ऐप मेनिफ़ेस्ट जोड़ना). 180x180 आकार Apple के अपने वेब क्लिप के उदाहरण कोड में दिए उच्च-रिज़ॉल्यूशन iPhone आइकन से मेल खाता है (Apple, वेब एप्लिकेशन कॉन्फ़िगर करना). Windows टाइल एक पुरानी फ़ाइल है: इससे कोई नुकसान नहीं होता, और अगर आप पुराने Windows इंस्टॉलेशन को लक्ष्य नहीं करते तो यह टैग हटा सकते हैं।
जनरेटर आपको कौन-सा HTML कोड देता है?
<head> के लिए छह लाइनें: PNG favicon के लिए दो rel="icon" लिंक, Apple touch आइकन, मेनिफ़ेस्ट लिंक, Windows टाइल और एक theme-color मेटा टैग। जब पेज कई आइकन सूचीबद्ध करता है, तो ब्राउज़र उनके type और sizes एट्रिब्यूट पढ़कर सबसे उपयुक्त आइकन चुनता है, और कोई फ़ाइल फ़ेल होने पर अगली पर चला जाता है (MDN, link प्रकार).
जनरेट किए गए कोड में दो सेटिंग्स बदलने लायक हैं। theme-color और मेनिफ़ेस्ट के रंग डिफ़ॉल्ट रूप से सफ़ेद (#ffffff) होते हैं: अगर आप चाहते हैं कि ब्राउज़र बार और इंस्टॉल की गई ऐप की स्प्लैश स्क्रीन आपकी साइट से मेल खाए, तो उन्हें अपने ब्रांड रंग से बदलें। और मेनिफ़ेस्ट में name और short_name जानबूझकर खाली छोड़े गए हैं: web.dev बताता है कि इनमें से कम से कम एक ज़रूरी है, और short_name होम स्क्रीन पर इस्तेमाल होता है, जहाँ जगह कम होती है।
क्या favicon SEO में मदद करता है?
रैंकिंग फ़ैक्टर के रूप में नहीं, लेकिन यह बताता है कि आपका नतीजा कैसा दिखता है। Google हर नतीजे के ऊपर आपकी साइट के नाम के बगल में आपका favicon दिखा सकता है, इसलिए साफ़ आइकन खोजने वालों को आपका ब्रांड पहचानने में मदद करता है और सामान्य ग्लोब वाले नतीजों के मुकाबले आपके क्लिक-थ्रू रेट को बढ़ा सकता है।
Google पात्रता की शर्तें सूचीबद्ध करता है, और उनमें से कोई एक कमी ही आम तौर पर favicon न दिखने की वजह होती है:
- होम पेज पर एक लिंक टैग। Google
rel="icon",shortcut icon,apple-touch-iconऔरapple-touch-icon-precomposedपढ़ता है। - क्रॉल की पहुँच। Googlebot को होम पेज तक और Googlebot-Image को आइकन फ़ाइल तक पहुँचना होगा। robots.txt का कोई नियम जो आपके images फ़ोल्डर को ब्लॉक करता है, आपका favicon छिपा सकता है।
- कम से कम 8x8 पिक्सल की वर्गाकार फ़ाइल, आदर्श रूप से 48x48 से बड़ी, किसी समर्थित फ़ॉर्मेट में: BMP, GIF, ICO, PNG, JPEG, PPM या TIFF। जनरेट की गई PNG फ़ाइलें इसके योग्य हैं।
- हर होस्टनेम के लिए एक favicon। किसी सबडोमेन का अपना आइकन हो सकता है; /blog जैसी सबडायरेक्टरी का नहीं।
- एक स्थिर URL जिसे आप बार-बार न बदलें।
बदलाव के बाद Google को होम पेज दोबारा क्रॉल करना होता है, जिसमें उसी दस्तावेज़ के अनुसार कुछ दिनों से लेकर कुछ हफ़्ते लग सकते हैं। Search Console में होम पेज की इंडेक्सिंग का अनुरोध करने से यह तेज़ होता है।
favicon को 16 पिक्सल पर पढ़ने लायक कैसे डिज़ाइन करें?
पहले सबसे छोटे आकार के लिए डिज़ाइन करें। 16x16 पर पूरे आइकन में सिर्फ़ 256 पिक्सल होते हैं, इसलिए टैगलाइन वाला पूरा लोगो धुंधला हो जाता है। ये नियम आइकन को पढ़ने लायक रखते हैं:
- पूरा लोगो नहीं, लोगो का निशान इस्तेमाल करें। एक चिन्ह या एक मोटा अक्षर छोटे आकार में टिकता है; एक शब्द नहीं।
- वर्ग को भरें। पतला हाशिया रखें, पर बड़े खाली किनारे न छोड़ें जो टैब में निशान को छोटा कर दें।
- तेज़ कंट्रास्ट और दो या तीन सपाट रंग चुनें। पतली लाइनें और ग्रेडिएंट छोटे आकार में गायब हो जाते हैं।
- लाइट और डार्क थीम दोनों जाँचें। गहरे निशान वाली पारदर्शी PNG डार्क टैब बार पर गायब हो जाती है; ठोस बैकग्राउंड या हल्का आउटलाइन इसे ठीक करता है।
- Android के लिए मास्क के बारे में सोचें। Android ऐप आइकन को गोल काट सकता है। MDN एक मास्किबल आइकन की सलाह देता है, जिसमें ज़रूरी हिस्सा सेफ़ ज़ोन के भीतर हो और बैकग्राउंड अपारदर्शी हो (MDN, ऐप आइकन परिभाषित करना). अगर आपका निशान किनारों को छूता है, तो 192 और 512 फ़ाइलों के लिए पैड किया हुआ संस्करण एक्सपोर्ट करें।
कौन-सी favicon गलतियाँ सबसे आम हैं?
ज़्यादातर टूटे favicon किसी इमेज की वजह से नहीं, बल्कि पाथ या कैश की वजह से होते हैं।
- फ़ाइलें गलत फ़ोल्डर में अपलोड होना। जनरेट किया गया कोड रूट की ओर इशारा करता है (
/favicon-32x32.png)। अगर आप फ़ाइलें /assets में रखते हैं, तो हर पाथ अपडेट करें। - /favicon.ico पर कोई फ़ाइल नहीं। जब कोई पेज आइकन घोषित नहीं करता, तो HTML स्टैंडर्ड ब्राउज़र को डिफ़ॉल्ट रूप से
/favicon.icoमाँगने देता है (WHATWG HTML स्टैंडर्ड, link प्रकार). टैग न होने वाले पेज, जैसे PDF या एरर पेज, आपके लॉग में 404 बनाएँगे। जनरेटर सिर्फ़ PNG फ़ाइलें बनाता है, इसलिए अगर आपको यह फ़ॉलबैक चाहिए, तो किसी भी इमेज एडिटर से अपना 32x32 PNG ICO फ़ाइल के रूप में एक्सपोर्ट करें। - एक पुराना आइकन जो हटता नहीं। ब्राउज़र favicon को बहुत आक्रामक तरीके से कैश करते हैं। रीडिज़ाइन के बाद फ़ाइल का नाम बदलें या वर्ज़न पैरामीटर (
?v=2) जोड़ें। - सिर्फ़ होम पेज पर टैग। ब्राउज़र आइकन हर पेज पर अलग से पढ़ते हैं, इसलिए कोड साझा टेम्पलेट में रखें।
- खिंचा हुआ लोगो। ऊपर बताए अनुसार जनरेट करने से पहले सोर्स को वर्गाकार काटें।
फ़ाइलें ऑनलाइन होने के बाद अपने डोमेन पर favicon निकालने का टूल चलाएँ, ताकि पता चले कि क्रॉलर असल में कौन-से आइकन पाता है, फिर ऑन-पेज SEO ऑडिट से बाकी हेड टैग जाँचें।
AI जवाबों में favicon आपके ब्रांड में कैसे फ़िट होता है?
ChatGPT और Perplexity जैसे AI सहायक अक्सर हर उद्धृत साइट का आइकन उसके स्रोत लिंक के बगल में दिखाते हैं। एक एकसमान favicon वहाँ भी आपके ब्रांड को पहचानने योग्य बनाता है, लेकिन यह सिर्फ़ ढाँचा है: उद्धृत होना आपकी सामग्री और आपके अधिकार पर निर्भर करता है। यह देखने के लिए कि आपकी साइट उन जवाबों में आती भी है या नहीं, AI उल्लेख ट्रैकर हर महीने, हर प्रॉम्प्ट और हर मॉडल के हिसाब से आपके ब्रांड के उल्लेख मापता है, और GEO और SEO डैशबोर्ड उन्हें आपके Google क्लिक और पोज़िशन के साथ रखता है।
एक पूरा favicon सेट एक वर्गाकार इमेज और दो मिनट लेता है। ऊपर अपने आइकन जनरेट करें, कोड अपने टेम्पलेट में चिपकाएँ, फिर उस ट्रैफ़िक को बढ़ाने के लिए Sorank के प्लान देखें जो उन्हें देखेगा, autopilot पर।
