Favicon Generator: ICO और PNG बनाएं

Favicon Generator क्या है?

Favicon Generator एक मुफ़्त, ब्राउज़र-आधारित टूल है जो किसी भी इमेज को आधुनिक ब्राउज़रों, ऑपरेटिंग सिस्टम और मोबाइल प्लेटफ़ॉर्म के लिए आवश्यक नौ स्टैंडर्ड फ़ेविकॉन साइज़ में बदलता है। नई वेबसाइट के लिए फ़ेविकॉन सेट करने का मतलब है सटीक पिक्सेल आयामों में PNG फ़ाइलों का एक विशिष्ट सेट बनाना — ब्राउज़र टैब के लिए 16×16, Apple Touch आइकन के लिए 180×180, Android Chrome के लिए 192×192 और 512×512 — साथ ही कई मध्यवर्ती साइज़। इसे मैन्युअल रूप से करने के लिए इमेज एडिटर में नौ बार रीसाइज़ करना पड़ता है। यह टूल एक क्लिक में सभी नौ बनाता है, हर साइज़ का लेबल किया हुआ प्रीव्यू दिखाता है और अलग-अलग या एक साथ डाउनलोड करने देता है। सब कुछ Canvas API का उपयोग करके आपके ब्राउज़र में चलता है — कोई इमेज आपके डिवाइस से बाहर नहीं जाती।

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

• कई फ़ेविकॉन साइज़ जनरेट करें — FAVICON_SIZES array में परिभाषित सभी 9 साइज़ बनाता है: 16, 32, 48, 64, 96, 128, 180, 192 और 512 पिक्सेल वर्गाकार। हर साइज़ को टारगेट आयामों पर कैनवास पर ओरिजिनल इमेज खींचकर रेंडर किया जाता है।
• ICO, PNG और WebP फ़ॉर्मेट बनाएं — सभी जनरेट किए गए फ़ेविकॉन PNG हैं (canvas.toDataURL('image/png') के माध्यम से)। व्यक्तिगत फ़ाइल नाम वेब मानकों का पालन करते हैं: favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png आदि।
• Apple Touch Icon सपोर्ट — 180×180px आउटपुट को apple-touch-icon.png नाम दिया गया है — वह फ़ाइल नाम जो iOS Safari खोजता है जब कोई उपयोगकर्ता किसी साइट को होम स्क्रीन में जोड़ता है।
• Android Chrome Icon सपोर्ट — 192×192px आउटपुट को android-chrome-192x192.png और 512×512px आउटपुट को android-chrome-512x512.png नाम दिया गया है, जो स्टैंडर्ड manifest.json Web App Manifest में निर्दिष्ट नामों से मेल खाते हैं।
• सभी जनरेट किए गए साइज़ का प्रीव्यू — जनरेशन के बाद, एक ग्रिड हर साइज़ को ट्रांसपेरेंसी-ग्रिड बैकग्राउंड पर लेबल किए हुए प्रीव्यू, फ़ाइल नाम, सटीक पिक्सेल आयाम और उपयोग के मामले का विवरण दिखाती है (जैसे "ब्राउज़र टैब आइकन", "Apple Touch Icon", "Chrome Web Store आइकन")।
• व्यक्तिगत या ZIP डाउनलोड — हर साइज़ का अपना डाउनलोड बटन है। "सभी डाउनलोड करें" बटन सभी जनरेट की गई फ़ाइलें — 9 PNG फ़ेविकॉन, एक favicon.ico (16, 32 और 48px साइज़ सहित) और एक site.webmanifest — एक favicons.zip आर्काइव में पैक करता है।
• स्वचालित favicon.ico जनरेशन — टूल PNG-in-ICO तकनीक का उपयोग करके 16, 32 और 48px PNG को एम्बेड करने वाली उचित ICO कंटेनर फ़ाइल बनाता है, जो <link rel="icon" type="image/x-icon" href="/favicon.ico"> के लिए तैयार है।
• site.webmanifest जनरेशन — 192 और 512px Android Chrome आइकन को रेफ़रेंस करने वाली एक उपयोग-के-लिए-तैयार Web App Manifest फ़ाइल डाउनलोड-ऑल ZIP आर्काइव में शामिल है।
• 100% क्लाइंट-साइड प्रोसेसिंग — कैनवास रीसाइज़ ऑपरेशन पूरी तरह से आपके ब्राउज़र में चलते हैं। आपकी सोर्स इमेज FileReader का उपयोग करके पढ़ी जाती है और कभी किसी सर्वर को नहीं भेजी जाती।
• किसी भी इमेज फ़ॉर्मेट के साथ काम करता है — फ़ाइल इनपुट image/* स्वीकार करता है, और <img> एलिमेंट फ़ाइल को डीकोड करता है। JPEG, PNG, SVG, WebP, GIF और AVIF सभी सोर्स इमेज के रूप में काम करते हैं।

Favicon Generator का उपयोग कैसे करें

चरण 1: अपनी सोर्स इमेज अपलोड करें

अपलोड ड्रॉप ज़ोन पर क्लिक करें या अपनी इमेज को उस पर खींचें। सर्वोत्तम परिणामों के लिए, वर्गाकार इमेज का उपयोग करें — टूल ctx.drawImage(originalImage, 0, 0, size, size) का उपयोग करके हर फ़ेविकॉन कैनवास को भरने के लिए आपकी इमेज को स्केल करता है, जो गैर-वर्गाकार इनपुट को खींचता है। एक 512×512px या बड़े वर्गाकार PNG के साथ पारदर्शी बैकग्राउंड आदर्श सोर्स है। इमेज लोड होने के बाद, मूल आयामों (जैसे 512 x 512px) दिखाता हुआ एक प्रीव्यू दिखाई देता है।

चरण 2: सभी साइज़ जनरेट करें

"Favicons जनरेट करें" पर क्लिक करें। टूल क्रमिक रूप से सभी 9 साइज़ से होकर गुज़रता है: हर साइज़ के लिए, यह छिपे हुए कैनवास को उस आयाम पर सेट करता है, उसे साफ करता है, कैनवास भरने के लिए आपकी इमेज को स्केल करके खींचता है, और परिणामी डेटा URL स्टोर करता है। लूप पूरा होने के बाद, एक सफलता टोस्ट पुष्टि करता है कि सभी साइज़ जनरेट की गईं।

चरण 3: परिणामों का प्रीव्यू करें

एक ग्रिड दिखाई देती है जो सभी 9 जनरेट किए गए फ़ेविकॉन एक साथ दिखाती है। हर आइटम दिखाता है:

• ट्रांसपेरेंसी-ग्रिड बैकग्राउंड पर रेंडर की गई प्रीव्यू इमेज (512×512 जैसे बड़े आउटपुट के लिए भी प्रीव्यू इमेज 64×64px पर कैप की गई है)
• फ़ाइल नाम (जैसे android-chrome-512x512.png)
• सटीक पिक्सेल आयाम (जैसे 512x512px)
• उपयोग का विवरण (जैसे Android Chrome splash)

यह आपको डाउनलोड करने से पहले 16×16 जैसे छोटे साइज़ में आइकन सही दिखता है या नहीं यह दृश्य रूप से पुष्टि करने देता है।

चरण 4: व्यक्तिगत फ़ाइलें या सभी ZIP के रूप में डाउनलोड करें

किसी विशिष्ट फ़ेविकॉन के बगल में डाउनलोड बटन पर क्लिक करें उस फ़ाइल को सहेजने के लिए। आप favicon.ico को अलग से भी डाउनलोड कर सकते हैं — इसमें एकल ICO कंटेनर में 16, 32 और 48px साइज़ हैं। एक साथ सब कुछ डाउनलोड करने के लिए, जनरेट किए गए फ़ेविकॉन कार्ड के हेडर में "सभी डाउनलोड करें" पर क्लिक करें। यह सभी 9 PNG फ़ाइलों, favicon.ico और एक site.webmanifest फ़ाइल वाला favicons.zip आर्काइव बनाता है।

चरण 5: अपनी वेबसाइट में फ़ेविकॉन जोड़ें

डाउनलोड की गई PNG फ़ाइलें अपने प्रोजेक्ट की पब्लिक रूट डायरेक्टरी में रखें। अपने HTML <head> में निम्नलिखित टैग जोड़ें:

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

Android Chrome PWA सपोर्ट के लिए, अपने manifest.json में 192×192 और 512×512 फ़ाइलें रेफ़रेंस करें:

{
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

व्यावहारिक उदाहरण

नई वेबसाइट सेटअप

परिदृश्य: आप Next.js के साथ बनाई गई एक व्यक्तिगत पोर्टफोलियो साइट लॉन्च कर रहे हैं और अपने लोगो SVG से सभी स्टैंडर्ड फ़ेविकॉन साइज़ चाहिए।

इनपुट: आपके लोगो का 512×512px वर्गाकार PNG एक्सपोर्ट (पारदर्शी बैकग्राउंड)।

टूल क्या बनाता है: नौ PNG फ़ाइलें: favicon-16x16.png से android-chrome-512x512.png तक, सभी ब्राउज़रों और मोबाइल प्लेटफ़ॉर्म की अपेक्षाओं से मेल खाते नाम और साइज़।

यह उपयोगी क्यों है: फ़ेविकॉन मैन्युअल रूप से सेट करने के लिए 9 अलग एक्सपोर्ट ऑपरेशन की आवश्यकता होती है। यहाँ एक क्लिक से यह पूरा चरण बदल जाता है।

Chrome Web Store आइकन

परिदृश्य: आप एक Chrome एक्सटेंशन सबमिट कर रहे हैं और Chrome Web Store लिस्टिंग गाइडलाइन के अनुसार 128×128px आइकन चाहिए।

इनपुट: किसी भी साइज़ में आपके एक्सटेंशन का आइकन आर्टवर्क।

टूल क्या बनाता है: favicon-128x128.png "Chrome Web Store आइकन" के रूप में लेबल किया गया — वही फ़ाइल जो Chrome Web Store को चाहिए।

यह उपयोगी क्यों है: 128×128px साइज़ एक विशिष्ट आवश्यकता है जिसे कई फ़ेविकॉन जनरेटर छोड़ देते हैं। यह टूल सही स्टैंडर्ड फ़ाइल नाम के साथ इसे शामिल करता है।

वेब ऐप के लिए PWA सेटअप

परिदृश्य: आप एक React ऐप में Progressive Web App (PWA) सपोर्ट जोड़ रहे हैं और manifest आइकन चाहिए।

इनपुट: 512×512px ऐप आइकन PNG।

टूल क्या बनाता है: android-chrome-192x192.png (192×192px) और android-chrome-512x512.png (512×512px) — Android Chrome के लिए Web App Manifest स्पेसिफिकेशन में निर्दिष्ट दो साइज़।

यह उपयोगी क्यों है: Android Chrome को होम स्क्रीन आइकन डिस्प्ले और स्प्लैश स्क्रीन के लिए दोनों साइज़ की आवश्यकता है। स्टैंडर्ड फ़ाइल नामों के साथ पहले से नाम देने से कॉन्फ़िगरेशन त्रुटियां नहीं होतीं।

टिप्स और सर्वोत्तम प्रथाएं

512×512px या बड़ी वर्गाकार इमेज से शुरू करें। टूल ctx.drawImage का उपयोग करके आपके इनपुट को हर टारगेट साइज़ में स्केल करता है। बड़ी वर्गाकार इमेज से शुरू करने का मतलब है हर स्केल पर अधिक विवरण उपलब्ध है, जो 16×16 जैसे छोटे साइज़ पर आर्टिफैक्ट कम करता है।

आकृति वाले लोगो वाले आइकन के लिए पारदर्शी PNG का उपयोग करें। अगर आपके लोगो में गैर-आयताकार आकार (सर्कल, शील्ड, या कस्टम आउटलाइन) है, तो पारदर्शी बैकग्राउंड वाला PNG दें। पारदर्शी क्षेत्र हर फ़ेविकॉन में स्थानांतरित होते हैं, जो ब्राउज़र टैब और iOS होम स्क्रीन पर सही दिखता है।

डाउनलोड करने से पहले 16×16 पर प्रीव्यू करें। ग्रिड हर साइज़ को डिस्प्ले स्केल पर दिखाती है। 16×16 प्रीव्यू अक्सर सबसे महत्वपूर्ण होता है — अगर आपका लोगो टेक्स्ट 16px पर अपठनीय है, तो सबसे छोटे साइज़ के लिए एक सरल मार्क-केवल संस्करण पर विचार करें।

"सभी डाउनलोड करें" फ़ंक्शन एक ZIP आर्काइव बनाता है। सभी जनरेट की गई फ़ाइलें — 9 PNG फ़ेविकॉन, favicon.ico और site.webmanifest — एकल favicons.zip फ़ाइल में पैक की जाती हैं। यह ब्राउज़र डाउनलोड सीमाओं से बचता है और सभी फ़ाइलों को एक आर्काइव में व्यवस्थित रखता है।

JPEG इनपुट काम करता है लेकिन पारदर्शी क्षेत्र काले हो जाते हैं। अगर आपकी सोर्स इमेज बिना पारदर्शिता के JPEG है, तो आउटपुट फ़ेविकॉन का वही बैकग्राउंड होगा। पारदर्शी बैकग्राउंड की आवश्यकता वाले आइकन के लिए, PNG सोर्स दें।

अपने ब्राउज़र के डाउनलोड व्यवहार की जांच करें। कुछ ब्राउज़र "सभी डाउनलोड करें" के बाद हर फ़ाइल के लिए व्यक्तिगत रूप से पूछते हैं। अगर आपको 9 डाउनलोड प्रॉम्प्ट दिखें, तो हर एक स्वीकार करें। Chrome में स्वचालित डाउनलोड सक्षम के साथ, सभी 9 फ़ाइलें बिना प्रॉम्प्ट के आपके डाउनलोड फ़ोल्डर में आती हैं।

सामान्य समस्याएं और समस्या निवारण

अपलोड करते समय "लोड त्रुटि" टोस्ट। यह img.onerror हैंडलर से ट्रिगर होता है जब ब्राउज़र अपलोड की गई फ़ाइल को इमेज के रूप में डीकोड नहीं कर सकता। सुनिश्चित करें कि आप एक वैध इमेज फ़ाइल (JPEG, PNG, WebP, SVG, आदि) अपलोड कर रहे हैं। भ्रष्ट फ़ाइलें या गलत एक्सटेंशन वाली फ़ाइलें यह त्रुटि उत्पन्न करेंगी।

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

"सभी डाउनलोड करें" शुरू नहीं होता। सभी डाउनलोड करें फ़ंक्शन JavaScript का उपयोग करके एक ZIP आर्काइव बनाता है। अगर डाउनलोड ट्रिगर नहीं होता, तो जांचें कि साइट के लिए पॉप-अप और डाउनलोड अनुमत हैं। आप अपने संबंधित डाउनलोड बटनों का उपयोग करके एक-एक करके व्यक्तिगत फ़ाइलें भी डाउनलोड कर सकते हैं।

डिप्लॉयमेंट के बाद ब्राउज़र में फ़ेविकॉन अपडेट नहीं हो रहे। ब्राउज़र फ़ेविकॉन कैशिंग आक्रामक है। नए फ़ेविकॉन डिप्लॉय करने के बाद, टैब को फ़ोर्स-रीफ्रेश करें (Ctrl+Shift+R या Mac पर Cmd+Shift+R) या ब्राउज़र कैश साफ करें। कैश-बस्टिंग क्वेरी स्ट्रिंग के साथ favicon फ़ाइल नाम बदलना (जैसे href="/favicon-32x32.png?v=2") भी रीफ्रेश को मजबूर करता है।

ग्रिड में 512×512 प्रीव्यू इमेज 64px पर कैप है। ग्रिड प्रीव्यू ग्रिड को कॉम्पैक्ट रखने के लिए डिस्प्ले को Math.min(size, 64) पिक्सेल पर सीमित करता है। डाउनलोड की गई फ़ाइल सही पूर्ण 512×512px PNG है — छोटी डिस्प्ले साइज़ केवल प्रीव्यू है।

गोपनीयता और सुरक्षा

Favicon Generator पूरी तरह से आपके ब्राउज़र में चलता है। आपकी सोर्स इमेज FileReader.readAsDataURL का उपयोग करके एक JavaScript Image ऑब्जेक्ट में लोड होती है, फिर एक छिपे हुए canvas एलिमेंट पर खींची जाती है। कोई इमेज डेटा किसी बाहरी सर्वर को नहीं भेजा जाता। सभी नौ आउटपुट फ़ेविकॉन स्थानीय रूप से canvas.toDataURL('image/png') से जनरेट होते हैं। यह मालिकाना लोगो, अप्रकाशित ब्रांडिंग और गोपनीय विज़ुअल एसेट के लिए सुरक्षित है। पेज लोड होने के बाद टूल पूरी तरह ऑफलाइन काम करता है।

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

क्या Favicon Generator मुफ़्त है?

हां, पूरी तरह से मुफ़्त। कोई अकाउंट आवश्यक नहीं, आउटपुट में कोई वॉटरमार्क नहीं जोड़ा जाता, और फ़ेविकॉन जनरेट करने की कोई सीमा नहीं है। प्रोसेसिंग के लिए उपयोग की गई Canvas API की कोई सर्वर-साइड लागत नहीं है।

क्या Favicon Generator ऑफलाइन काम करता है?

हां। पेज लोड होने के बाद, सभी प्रोसेसिंग ब्राउज़र-नेटिव Canvas API और FileReader का उपयोग करती है। इमेज लोडिंग, फ़ेविकॉन जनरेशन या डाउनलोड के दौरान कोई नेटवर्क कॉल नहीं किए जाते। यह इंटरनेट कनेक्शन के बिना काम करता है।

क्या Favicon Generator के साथ मेरा डेटा सुरक्षित है?

हां। आपकी इमेज FileReader के माध्यम से ब्राउज़र मेमोरी में पढ़ी जाती है और canvas एलिमेंट पर खींची जाती है। कोई इमेज डेटा आपके ब्राउज़र से बाहर नहीं जाता। यह अप्रकाशित लोगो, गोपनीय ब्रांड एसेट और मालिकाना आइकनोग्राफी के लिए सुरक्षित है।

टूल कौन से साइज़ जनरेट करता है?

टूल 9 साइज़ जनरेट करता है: 16×16, 32×32, 48×48, 64×64, 96×96, 128×128, 180×180, 192×192 और 512×512 पिक्सेल। हर एक PNG के रूप में उसके उपयोग के मामले के लिए स्टैंडर्ड फ़ाइल नाम के साथ सहेजी जाती है।

हर साइज़ के लिए स्टैंडर्ड फ़ाइल नाम क्या हैं?

फ़ाइल नाम वेब मानकों से मेल खाते हैं: favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, favicon-64x64.png, favicon-96x96.png, favicon-128x128.png, apple-touch-icon.png (180×180), android-chrome-192x192.png और android-chrome-512x512.png।

क्या टूल .ico फ़ाइल जनरेट करता है?

हां। टूल स्वचालित रूप से एक favicon.ico फ़ाइल जनरेट करता है जिसमें 16, 32 और 48px साइज़ ICO कंटेनर के अंदर PNG के रूप में एम्बेड हैं। यह <link rel="icon" type="image/x-icon" href="/favicon.ico"> के साथ डिप्लॉयमेंट के लिए तैयार है। ICO फ़ाइल व्यक्तिगत रूप से डाउनलोड की जा सकती है या "सभी डाउनलोड करें" ZIP आर्काइव में शामिल है।

96×96 साइज़ का उपयोग किस लिए होता है?

96×96 favicon-96x96.png टूल के विवरण array में "Google TV आइकन" के रूप में लेबल किया गया है। इसे ऐतिहासिक रूप से Google TV ऐप आइकन के लिए उपयोग किया जाता था और एक व्यापक favicon पैकेज में पूर्णता के लिए शामिल किया गया है।

क्या मैं SVG को सोर्स इमेज के रूप में उपयोग कर सकता हूं?

हां। फ़ाइल इनपुट image/* स्वीकार करता है और आधुनिक ब्राउज़र <img> एलिमेंट का उपयोग करके SVG डीकोड कर सकते हैं। जब canvas पर खींचा जाता है तो SVG ब्राउज़र द्वारा रास्टराइज़ किया जाता है। आउटपुट एक रास्टराइज़ किया हुआ PNG होगा — वेक्टर SVG favicon नहीं — जो अधिकांश उपयोग के मामलों के लिए उपयुक्त है।

क्या मुझे अपनी सोर्स इमेज में पारदर्शी बैकग्राउंड का उपयोग करना चाहिए?

हां, अगर आपके आइकन में एक आकृति-वाली आउटलाइन है। पारदर्शी बैकग्राउंड PNG आउटपुट में स्थानांतरित होते हैं। iOS होम स्क्रीन पर रखे गए आइकन के लिए (apple-touch-icon.png), iOS स्वचालित रूप से गोल कोने जोड़ता है, इसलिए पारदर्शी बैकग्राउंड सही दिखता है। ब्राउज़र टैब फ़ेविकॉन के लिए, ब्राउज़र का टैब बैकग्राउंड पारदर्शी क्षेत्रों के माध्यम से दिखता है।

"सभी डाउनलोड करें" बटन वास्तव में क्या करता है?

यह सभी जनरेट की गई फ़ाइलों को एक favicons.zip आर्काइव में पैक करता है: 9 PNG फ़ेविकॉन, favicon.ico (16, 32 और 48px साइज़ सहित) और एक site.webmanifest फ़ाइल। ZIP आपके ब्राउज़र में जनरेट होता है और एक फ़ाइल के रूप में डाउनलोड होता है।

संबंधित टूल

• जल्द आ रहा है: SVG से PNG — Favicon Generator में फ़ीड करने से पहले अपने SVG लोगो को उच्च-रिज़ॉल्यूशन PNG में कनवर्ट करें।
• जल्द आ रहा है: इमेज रीसाइज़र — सबसे साफ आउटपुट के लिए फ़ेविकॉन जनरेट करने से पहले अपनी सोर्स कलाकृति को 512×512px वर्गाकार में रीसाइज़ करें।
• जल्द आ रहा है: प्लेसहोल्डर जनरेटर — अंतिम ब्रांड एसेट की डिलीवरी की प्रतीक्षा करते हुए प्लेसहोल्डर इमेज जनरेट करें।
• जल्द आ रहा है: इमेज कनवर्टर — यदि आपके डिप्लॉयमेंट को इसकी आवश्यकता है तो जनरेट किए गए PNG फ़ेविकॉन को WebP या अन्य फ़ॉर्मेट में कनवर्ट करें।

Favicon Generator अभी आज़माएं: जल्द आ रहा है: Glyph Widgets Favicon Generator