Favicon कैसे बनाएं
Favicon बनाने के लिए ऊपर अपना लोगो डालें - या कोई अक्षर या इमोजी टाइप करें - लुक एडजस्ट करें और ZIP डाउनलोड करें। प्रीव्यू में आइकन हर असली साइज़ में और ब्राउज़र टैब में, लाइट और डार्क मोड दोनों में दिखता है।
- स्रोत चुनें। PNG या SVG लोगो सबसे अच्छा रहता है; कोई भी दूसरी इमेज चौकोर के अंदर फ़िट कर दी जाती है। लोगो नहीं है? रंगीन बैकग्राउंड पर कोई अक्षर या इमोजी इस्तेमाल करें।
- लुक सेट करें। बैकग्राउंड का रंग या पारदर्शी, शेप (गोल कोनों वाला, चौकोर या गोल) और तस्वीर के चारों ओर कितनी पैडिंग रहे।
- डाउनलोड करें। सभी आइकन डाउनलोड करें से पूरा पैकेज मिलता है; सिर्फ़ favicon.ico से केवल वही एक फ़ाइल मिलती है।
Favicon पैकेज में क्या-क्या है
| फ़ाइल | साइज़ | कहाँ इस्तेमाल होती है |
|---|---|---|
favicon.ico | 16, 32 और 48 px | हर ब्राउज़र, Windows, सर्च रिज़ल्ट |
favicon-16x16.png, favicon-32x32.png | 16 और 32 px | ब्राउज़र टैब और बुकमार्क |
apple-touch-icon.png | 180 px | iPhone और iPad की होम स्क्रीन |
android-chrome-192x192.png, -512x512.png | 192 और 512 px | Android होम स्क्रीन, इंस्टॉल किए गए वेब ऐप |
site.webmanifest | - | Android और वेब ऐप के लिए आइकन और रंगों के नाम तय करती है |
favicon-html.txt | - | आपके पेजों में पेस्ट करने के टैग |
Apple आइकन में हमेशा ठोस बैकग्राउंड और चौकोर कोने होते हैं: iPhone कोनों को खुद गोल करता है और पारदर्शी हिस्सों को काला दिखाता है।
अपनी वेबसाइट में Favicon जोड़ें
- पैकेज को अनज़िप करें और फ़ाइलें अपनी वेबसाइट के रूट फ़ोल्डर में, होम पेज के बगल में, अपलोड करें,
ताकि
yoursite.com/favicon.icoपर आइकन खुले। - HTML टैग (ऊपर दिखाए गए, और
favicon-html.txtमें) अपने पेजों के<head>में पेस्ट करें। - कैश साफ़ करके रीलोड करें। ब्राउज़र पुराने favicon को पकड़े रहते हैं, इसलिए प्राइवेट विंडो सबसे तेज़ जाँच है।
WordPress में आप इसके बजाय 512 px वाले आइकन को Customizer में Site Icon के रूप में सेट कर सकते हैं, और वह बाकी साइज़ खुद बना लेता है।
साफ़ Favicon के लिए टिप्स
- सरल रखें। 16 पिक्सल पर बारीक डिज़ाइन वाला लोगो धुंधला हो जाता है। टेक्स्ट वाले पूरे लोगो की जगह अपने लोगो का सिंबल या उसका पहला अक्षर इस्तेमाल करें।
- कंट्रास्ट रखें। ब्राउज़र थीम के हिसाब से टैब हल्के या गहरे होते हैं - दोनों प्रीव्यू देखें।
- पैडिंग का ध्यान रखें। कम पैडिंग से टैब में आइकन बड़ा दिखता है; थोड़ी ज़्यादा पैडिंग फ़ोन की होम स्क्रीन पर बेहतर लगती है।
किसी दूसरे साइज़ की एक अकेली .ico फ़ाइल चाहिए? इमेज कन्वर्टर किसी भी इमेज को ICO के रूप में सेव करता है।
अक्सर पूछे जाने वाले सवाल
Favicon कैसे बनाएं?
इस पेज के बॉक्स में अपना लोगो या कोई भी चौकोर इमेज डालें, या कोई अक्षर या इमोजी टाइप करें। बैकग्राउंड, पैडिंग और शेप एडजस्ट करें, फिर सभी आइकन साइज़ और अपनी साइट में पेस्ट करने वाले HTML के साथ ZIP डाउनलोड करें।
Favicon के लिए कौन-से साइज़ चाहिए?
16, 32 और 48 पिक्सल वाला favicon.ico ब्राउज़र और Windows के लिए काफ़ी है; 180 पिक्सल का apple-touch-icon iPhone और iPad के लिए है; 192 और 512 पिक्सल के आइकन Android और इंस्टॉल किए गए वेब ऐप के लिए हैं। पैकेज में ये सभी शामिल हैं।
अपनी वेबसाइट में favicon कैसे जोड़ें?
ZIP की फ़ाइलें अपनी साइट के रूट फ़ोल्डर में अपलोड करें, ताकि favicon.ico yoursite.com/favicon.ico पर खुले। फिर HTML टैग अपने पेजों के head सेक्शन में पेस्ट करें।
मेरा नया favicon क्यों नहीं दिख रहा?
ब्राउज़र favicon को काफ़ी समय तक कैश में रखते हैं। favicon का पता सीधे खोलें, उसे रीलोड करें, या प्राइवेट विंडो में देखें। सर्च रिज़ल्ट में बदलाव दिखने में कई हफ़्ते लग सकते हैं।
क्या मैं टेक्स्ट या इमोजी से favicon बना सकता/सकती हूँ?
जी हाँ। "अक्षर या इमोजी" चुनें, एक या दो अक्षर टाइप करें और रंग चुनें। लोगो के बिना साफ़-सुथरा आइकन पाने का यह आसान तरीका है।
क्या मेरी इमेज अपलोड होती है?
नहीं। सभी आइकन आपके ब्राउज़र में ही बनते हैं, और आपकी इमेज आपके डिवाइस से बाहर नहीं जाती।