favicons.zip में क्या मिलता है
एक इमेज अपलोड करें और जनरेटर आपके ब्राउज़र में ही वे सारी फ़ाइलें बना देता है जिनकी आज की वेबसाइट को ज़रूरत होती है:
| फ़ाइल | साइज़ | कहाँ इस्तेमाल होती है |
|---|---|---|
favicon.ico |
16, 32 और 48 px एक ही फ़ाइल में | ब्राउज़र टैब, बुकमार्क, Windows और हर टूल जो /favicon.ico माँगता है |
favicon-16x16.png |
16×16 | सामान्य स्क्रीन पर टैब |
favicon-32x32.png |
32×32 | हाई-डेंसिटी स्क्रीन पर टैब, शॉर्टकट |
favicon-48x48.png |
48×48 | Google सर्च रिज़ल्ट, डेस्कटॉप शॉर्टकट |
apple-touch-icon.png |
180×180 | iPhone और iPad पर "होम स्क्रीन में जोड़ें" |
android-chrome-192x192.png |
192×192 | Android होम स्क्रीन |
android-chrome-512x512.png |
512×512 | ऐप की तरह इंस्टॉल की गई साइट (PWA) और उसकी स्प्लैश स्क्रीन |
site.webmanifest |
— | Android/Chrome को बताता है कि दोनों बड़े आइकन कहाँ हैं |
README-favicon.html |
— | पेस्ट करने के लिए HTML टैग |
कौन-सी सोर्स इमेज सबसे अच्छी रहती है
- चौकोर, सरल और बोल्ड। 16 px पर कुल 256 पिक्सल ही होते हैं। टैगलाइन वाला पूरा लोगो धब्बा बन जाता है; एक अक्षर या सिंबल पढ़ने लायक़ रहता है। कई ब्रांड फ़ेविकॉन के लिए लोगो का सरल रूप इस्तेमाल करते हैं।
- कम से कम 512×512। सबसे बड़ा आइकन 512 px का है, इसलिए छोटी इमेज बड़ी की जाएगी और धुँधली दिखेगी। SVG लोगो सबसे अच्छा है — छोटा करने से पहले उसे हाई रेज़ोल्यूशन पर रेंडर किया जाता है।
- ट्रांसपेरेंट PNG या SVG।
.icoऔर छोटे PNG में ट्रांसपेरेंसी बनी रहती है, इसलिए आइकन ब्राउज़र की लाइट और डार्क दोनों थीम पर अच्छा दिखता है। - इमेज चौकोर नहीं है? उसे बिना काटे चौकोर के अंदर फ़िट किया जाता है, किनारों पर पारदर्शी जगह रहती है। अगर पूरा चौकोर भरना है, तो पहले क्रॉप करें या सर्कल क्रॉप से गोल वर्ज़न बनाएँ।
Apple touch आइकन का बैकग्राउंड
iOS होम स्क्रीन आइकन में ट्रांसपेरेंसी नहीं मानता — पारदर्शी हिस्से काले हो जाते हैं। इसलिए 180×180 वाले apple-touch-icon.png को हमेशा ठोस बैकग्राउंड मिलता है। डिफ़ॉल्ट रूप से यह सफ़ेद है; अपलोड बॉक्स के पास वाले कलर फ़ील्ड से अपने ब्रांड का रंग चुनें (कलर पिकर इसे आपके लोगो से निकाल सकता है)। बाक़ी साइज़ पारदर्शी ही रहते हैं।
फ़ाइलें कहाँ रखें
- ZIP खोलें और सारी फ़ाइलें अपनी साइट के रूट में अपलोड करें, ताकि
https://yoursite.com/favicon.icoखोलने पर आइकन दिखे। README-favicon.htmlके टैग हर पेज के<head>में (या अपनी थीम के हेडर टेम्पलेट में) पेस्ट करें:
<link rel="icon" href="/favicon.ico" sizes="any">
<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">
<link rel="manifest" href="/site.webmanifest">
- अगर साइट किसी सबफ़ोल्डर में है, तो पाथ उसी हिसाब से बदलें।
WordPress में Appearance → Customize → Site Identity → Site Icon एक ही 512×512 इमेज से यह काम कर देता है — android-chrome-512x512.png इस्तेमाल करें। Blogger, Shopify, Wix और Squarespace में भी ऐसा ही "favicon" फ़ील्ड होता है।
साथ आने वाली site.webmanifest में सिर्फ़ आइकन की सूची है। अगर आप चाहते हैं कि लोग आपकी साइट को ऐप की तरह इंस्टॉल कर सकें, तो उसमें name, short_name, theme_color, background_color और "display": "standalone" जोड़ें।
"फ़ेविकॉन बदल दिया, फिर भी पुराना दिख रहा है"
फ़ेविकॉन वेबसाइट की लगभग हर चीज़ से ज़्यादा ज़िद्दी तरीक़े से कैश होते हैं।
https://yoursite.com/favicon.icoसीधे खोलें और हार्ड रीलोड करें (Ctrl + F5, Mac पर Cmd + Shift + R)।- लिंक में वर्ज़न जोड़ें, जैसे
href="/favicon.ico?v=2", ताकि ब्राउज़र इसे नई फ़ाइल समझे। - अगर CDN या कैशिंग प्लगइन है, तो उसका कैश साफ़ करें।
- बुकमार्क और होम स्क्रीन शॉर्टकट दोबारा बनाए जाने तक पुराना आइकन ही दिखाते हैं।
- Google सर्च रिज़ल्ट में आइकन तभी बदलता है जब वह आपके होमपेज को फिर से क्रॉल करता है, और इसमें कुछ दिन से लेकर हफ़्ते लग सकते हैं। Google को ऐसा चौकोर आइकन चाहिए जिसकी साइड 48 px का गुणज हो — 48×48 PNG और
.icoयह शर्त पूरी करते हैं।
जुड़े हुए टूल
- आइकन बनाने से पहले फ़ोटो का बैकग्राउंड हटाएँ: बैकग्राउंड हटाएँ।
- लोगो WebP में है? अगर आपका एडिटर नहीं खोलता, तो उसे PNG में बदलें।
- दुकान या प्रोफ़ाइल के लिए सादी 512×512 इमेज चाहिए? 512×512 में रीसाइज़।