Favicon जनरेटर

छवि

किसी छवि या अक्षर से संपूर्ण favicon सेट बनाएँ — favicon.ico (16/32/48), apple-touch-icon, Android Chrome आइकन और webmanifest को .zip में पैक कर देता है। कुछ भी अपलोड नहीं होता।

100% क्लाइंट-साइड कोई बैकएंड नहीं

स्रोत

क्लिक करें या यहाँ छवि छोड़ें

आकार

webmanifest और apple-touch-icon से आपका आइकन iOS होम स्क्रीन तथा Android पर ठीक दिखता है।

पूर्वावलोकन

HTML स्निपेट

इस पृष्ठ पर

Favicon जनरेटर क्या है?#

Favicon वह छोटा आइकन है जो ब्राउज़र टैब, बुकमार्क सूची, फ़ोन के “होम स्क्रीन पर जोड़ें” पूर्वावलोकन, और Windows टाइल में दिखता है। अजीब बात यह है कि “एक favicon” कोई एक फ़ाइल नहीं है — भिन्न प्लेटफ़ॉर्म भिन्न आकार और भिन्न फ़ाइलनाम अपेक्षा करते हैं। एक डेस्कटॉप ब्राउज़र क्लासिक favicon.ico चाहता है, iOS 180×180 apple-touch-icon.png चाहता है, एक इंस्टॉल करने योग्य PWA site.webmanifest में 192 और 512 चाहता है, और आधुनिक ब्राउज़र स्टैंडअलोन PNG भी उठाते हैं। इन सभी को हाथ से बनाना, और उन्हें जोड़ने वाले <head> टैग — ठीक वही झंझट भरा काम है जिसे आपको दोबारा हाथ से नहीं करना चाहिए।

यह पृष्ठ एक ही स्रोत से पूर्ण सेट बनाता है: या तो आपके दी गई कोई छवि, या ठोस पृष्ठभूमि पर कोई अक्षर (त्वरित “पहला अक्षर” ब्रांड निशान हेतु सुविधाजनक)। अपनों आकार चुनें, और यह सब कुछ एक .zip में बंडल कर देता है — मल्टी-इमेज ICO, स्टैंडअलोन PNG, webmanifest, और एक HTML स्निपेट जो चिपकाने हेतु सटीक <link> और <meta> टैग सूचीबद्ध करता है। सभी रास्टराइज़ेशन आपके ब्राउज़र में होता है।

इसका उपयोग कैसे करें#

कोई स्रोत चुनें:
- छवि — कोई भी मोटे तौर पर वर्गाकार छवि खींचें (या चुनें)। इसे हर चुने गए आकार में बनाया जाता है।
- अक्षर — एक या दो अक्षर टाइप करें (डिफ़ॉल्ट A), एक पृष्ठभूमि रंग (डिफ़ॉल्ट आसमानी नीला) और एक पाठ रंग (डिफ़ॉल्ट सफ़ेद) चुनें। अक्षर हर आकार पर पृष्ठभूमि पर केंद्रित रहता है।
16, 32, 48, 180, 192, 512 में से अपनों आवश्यक आकार चिह्नित करें। डिफ़ॉल्ट सभी छह चालू हैं। 48 केवल favicon.ico के अंदर रहता है (कोई स्टैंडअलोन PNG नहीं), इसलिए 16 और 32 होने पर यह स्वतः बंडल होता है।
पूर्वावलोकन canvas देखें — यह सबसे बड़ा चुना हुआ आकार पारदर्शिता चेकरबोर्ड पर रेंडर करता है ताकि आप कोई भी पारदर्शी क्षेत्र देख सकें।
.zip डाउनलोड करें क्लिक करें। डिफ़ॉल्ट सभी-आकार चयन हेतु संग्रह में ये होते हैं:
- favicon.ico — 16, 32, और 48 को एम्बेडेड PNG के रूप में बंडल करता मल्टी-इमेज ICO (वह Vista+ प्रारूप जिसे हर आधुनिक ब्राउज़र स्वीकार करता है)।
- favicon-16x16.png, favicon-32x32.png — स्टैंडअलोन PNG।
- apple-touch-icon.png — 180×180 iOS आइकन।
- android-chrome-192x192.png, android-chrome-512x512.png — PWA मेनिफ़ेस्ट आइकन।
- site.webmanifest — 192/512 आइकन संदर्भित, थीम और पृष्ठभूमि रंगों सहित।
- html-snippet.html — <link rel="icon">, <link rel="apple-touch-icon">, <link rel="manifest">, और <meta name="theme-color"> टैग।
अपने साइट रूट में अनज़िप करें, स्निपेट को अपने <head> में चिपकाएँ, और आइकन / से हल हो जाते हैं।

मुख्य विशेषताएँ#

एक zip में पूर्ण, पारंपरिक-नामित सेट। फ़ाइलनाम (favicon.ico, apple-touch-icon.png, android-chrome-512x512.png, site.webmanifest) वही मेल खाते हैं जो ब्राउज़र और बिल्ड टूल साइट रूट पर डिफ़ॉल्ट रूप से ढूँढते हैं।
स्वयं लिखित ICO एन्कोडर। एक उचित मल्टी-इमेज Vista+ ICO (ICONDIR + ICONDIRENTRY तालिका + एम्बेडेड PNG पेलोड), शून्य से लिखा — कोई एकल-इमेज 32×32 स्टब नहीं।
तुरंत ब्रांड निशान हेतु अक्षर मोड। दो अक्षर, दो रंग चयनकर्ता, हो गया — आंतरिक टूल और डेमो हेतु उपयोगी जिन्हें तीस सेकंड में पहचानने योग्य आइकन चाहिए।
केवल वही फ़ाइलें जो वास्तव में चाहिए। कोई आकार अचिह्नित करें और न तो उसकी PNG और न ही मेनिफ़ेस्ट प्रविष्टि उत्पन्न होती है; HTML स्निपेट मेल करने हेतु पुनः उत्पन्न होता है।
चिपकाने-के-लिए-तैयार head स्निपेट। सटीक <link> और <meta> पंक्तियाँ, केवल उपस्थित संपत्तियों तक सीमित, ताकि आप उन फ़ाइलों के संदर्भ न चिपकाएँ जो आपने उत्पन्न नहीं कीं।
100% स्थानीय। स्रोत छवि या अक्षर ब्राउज़र में रास्टराइज़ होता है; zip ब्राउज़र में जमा होता है। कोई अपलोड नहीं।

विस्तृत उदाहरण#

आपको “Glide” नामक एक साइड प्रोजेक्ट हेतु favicon चाहिए। स्रोत: अक्षर चुनें, G टाइप करें, पृष्ठभूमि #0ea5e9 और पाठ #ffffff पर सेट करें, सभी छह आकार चिह्नित छोड़ें, और .zip डाउनलोड करें क्लिक करें। अनज़िपिंग यह देता है:

favicon.ico
favicon-16x16.png
favicon-32x32.png
apple-touch-icon.png
android-chrome-192x192.png
android-chrome-512x512.png
site.webmanifest
html-snippet.html

html-snippet.html में ठीक यह है:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0ea5e9">

इन आठ फ़ाइलों को अपने साइट रूट में डालें, छह पंक्तियाँ अपने <head> में चिपकाएँ, और हर प्लेटफ़ॉर्म — ब्राउज़र टैब, iOS होम स्क्रीन, Android PWA — सही आइकन हल कर लेता है।

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

कोई स्टैंडअलोन 48×48 PNG क्यों नहीं?#

48 केवल favicon.ico के अंदर सेवित होता है (कुछ विरासत टूलिंग ICO से 48 प्रविष्टि पढ़ती है)। स्टैंडअलोन favicon-48x48.png केवल बेकार बोझ होगी जिसे कोई ब्राउज़र नहीं लाता, इसलिए टूल 48 को ICO में बंडल करता है और स्टैंडअलोन फ़ाइल छोड़ देता है।

क्या मुझे सभी छह आकार वास्तव में चाहिए?#

पूर्ण कवरेज हेतु, हाँ। यदि आपकेवल ब्राउज़र टैब की परवाह है और iOS या PWA की नहीं, तो 180, 192, और 512 अचिह्नित करें और आपको केवल ICO साथ 16/32 PNG मिलते हैं — बहुत छोटा बंडल। तब स्निपेट में केवल icon लिंक होते हैं, कोई manifest या apple-touch पंक्तियाँ नहीं।

ICO “एम्बेडेड PNG” के रूप में वर्णित है — क्या वह वैध है?#

हाँ। Windows Vista के बाद से, ICO PNG पेलोड एम्बेड कर सकता है (पुराने BMP प्रारूप के बजाय), और हर आधुनिक ब्राउज़र इसे पढ़ता है। यह एक अलग BMP एन्कोडर से बचता है और 48 आकार हेतु छोटी फ़ाइलें बनाता है।

मेरा अक्षर एक आकार पर अकेंद्र दिखता है।#

अक्षर को एक सुसंगत फ़ॉन्ट से हर आकार पर canvas पर केंद्रित किया जाता है; बहुत वर्गाकार अक्षर (M जैसे) और एसेंडर/डिसेंडर वाले अक्षर फ़ॉन्ट मेट्रिक्स के कारण थोड़े ऊपर या नीचे दिख सकते हैं। यदि पिक्सेल-सटीक केंद्रण मायने रखता है, तो निशान को किसी छवि एडिटर में रेंडर करें और स्रोत: छवि उपयोग करें।