Favicon Assets Generator

एक संपूर्ण favicon बंडल बनाएं — ICO, PNGs, Apple touch icon, PWA icons, web manifest, और HTML स्निपेट — सब कुछ आपके ब्राउज़र में स्थानीय रूप से।

स्रोत छवि
PNG, JPEG, WebP, या SVG को छोड़ें या चुनें। हर प्लेटफ़ॉर्म इस छवि का उपयोग करता है जब तक आप इसे नीचे ओवरराइड न करें।
साइट जानकारी
manifest, apple-touch-icon, और HTML स्निपेट द्वारा उपयोग किया जाता है।

जब ऐप का नाम सतह के लिए बहुत लंबा हो तो दिखाया जाता है।

वैकल्पिक। खाली होने पर manifest से छोड़ दिया जाता है।

जहां इंस्टॉल किया गया PWA खुलता है।

HTML स्निपेट में हर href पर और manifest icons array में हर src पर लागू उपसर्ग।

manifest theme_color और HTML <meta name="theme-color"> टैग को चलाता है।

Manifest background_color। ब्राउज़र द्वारा PWAs पर स्प्लैश स्क्रीन रंगने के लिए उपयोग किया जाता है।

डेस्कटॉप ब्राउज़र favicon
favicon.ico, favicon-16x16.png, favicon-32x32.png, और (जब स्रोत SVG हो) favicon.svg को नियंत्रित करता है।

आइकन के अंदर स्रोत के चारों ओर दृश्य सांस लेने की जगह।

डेस्कटॉप ब्राउज़र टैब
डेस्कटॉप ब्राउज़र टैब (dark)
खोज इंजन परिणाम
iOS वेब क्लिप
iOS होम स्क्रीन पर उपयोग किए जाने वाले 180×180 apple-touch-icon.png को नियंत्रित करता है।

Apple आइकन अपारदर्शी होने चाहिए, इसलिए यह भराव हमेशा लागू किया जाता है।

आइकन के अंदर स्रोत के चारों ओर दृश्य सांस लेने की जगह।

iOS होम स्क्रीन
PWA आइकन
pwa-192x192.png, pwa-512x512.png, और maskable वेरिएंट को नियंत्रित करता है।

आइकन के अंदर स्रोत के चारों ओर दृश्य सांस लेने की जगह।

W3C-अनुशंसित सुरक्षित क्षेत्र 40% है। किसी भी प्लेटफ़ॉर्म मास्क के अंदर स्रोत सामग्री दृश्यमान रहती है।

Windows टास्कबार
Android लॉन्चर
उत्पन्न बंडल
हर एसेट को रेंडर करने, zip बनाने, और HTML स्निपेट कॉपी करने के लिए Generate पर क्लिक करें।
अभी कोई बंडल नहीं
favicon बंडल को इकट्ठा करने के लिए एक छवि चुनें और Generate पर क्लिक करें।

टूल क्या जनरेट करता है

यह जनरेटर एक ही छवि को एक संपूर्ण, आधुनिक फ़ेविकॉन बंडल में बदल देता है — पुराने ब्राउज़रों के लिए एक मल्टी-साइज़ .ico, 16 / 32 / 180 / 192 / 512 PNG वेरिएंट, एक वैकल्पिक मूल .svg, PWA के लिए एक site.webmanifest, और वह HTML स्निपेट जिसे आप <head> में पेस्ट करते हैं। हर बाइट आपके ब्राउज़र में ही बनती है; कोई अपलोड नहीं, कोई सर्वर नहीं, कोई एनालिटिक्स नहीं।

बंडल में क्या है

  • favicon.ico — ब्राउज़र टैब, बुकमार्क और पुराने Windows शॉर्टकट के लिए मल्टी-इमेज (16 / 32 / 48)।
  • favicon-16x16.png और favicon-32x32.png — मौजूदा ब्राउज़रों द्वारा उपयोग किए जाने वाले आधुनिक PNG वेरिएंट।
  • favicon.svg — केवल तभी शामिल किया जाता है जब आपकी स्रोत छवि SVG हो और “Use original SVG” टॉगल चालू हो।
  • apple-touch-icon.png — 180×180, अपारदर्शी, iOS होम स्क्रीन के लिए उपयोग किया जाता है।
  • pwa-192x192.png और pwa-512x512.png — मानक PWA आइकन।
  • pwa-maskable-192x192.png और pwa-maskable-512x512.png — W3C द्वारा अनुशंसित सुरक्षित क्षेत्र वाले मास्केबल वेरिएंट।
  • site.webmanifest — ऊपर दिए गए आइकनों से जुड़ा PWA मैनिफ़ेस्ट।

पैडिंग, बैकग्राउंड और मास्केबल सुरक्षित क्षेत्र कैसे काम करते हैं

प्रत्येक प्लेटफ़ॉर्म की अपनी पैडिंग (“Margin”) होती है जिससे आप आइकन कैनवास के अंदर कुछ खाली जगह छोड़ सकें। “Add background” स्विच आपके स्रोत के पीछे एक अपारदर्शी वर्ग पेंट करता है — यह तब उपयोगी है जब स्रोत पारदर्शी हो और गंतव्य को अपारदर्शिता की आवश्यकता हो (Apple की होम स्क्रीन) या केवल ब्राउज़र टैब में दृश्य कंट्रास्ट के लिए। मास्केबल PWA आइकन प्लेटफ़ॉर्म मार्जिन के अतिरिक्त एक सुरक्षित क्षेत्र का उपयोग करते हैं: मध्य ~80% के बाहर की कोई भी चीज़ Android, Windows या ChromeOS द्वारा क्रॉप की जा सकती है जब वे गोलाकार, गोल कोनों वाला या स्क्वर्कल मास्क लगाते हैं।

बंडल को अपनी साइट में जोड़ना

  1. डाउनलोड की गई आर्काइव को अपने वेब रूट में अनज़िप करें (ताकि फ़ाइलें /favicon.ico, /site.webmanifest, आदि पर रहें)।
  2. HTML स्निपेट को अपनी साइट के <head> में पेस्ट करें।
  3. यदि आप किसी सब-पाथ से एसेट्स सर्व करते हैं (उदाहरण के लिए /static/icons/), तो जनरेट करने से पहले “Asset path” सेट करें ताकि स्निपेट और मैनिफ़ेस्ट सही URL का उपयोग करें।
  4. यदि आपने मैनिफ़ेस्ट को इस टूल द्वारा उजागर की गई सीमा से आगे कस्टमाइज़ किया है (उदाहरण के लिए categories या screenshots जोड़ने के लिए), तो site.webmanifest को टेक्स्ट एडिटर में खोलें और उसे सीधे एडिट करें — यह सादा JSON है।