इसका इस्तेमाल कैसे करें
- आइकन का स्रोत चुनें: एक तस्वीर, या किसी रंग पर अक्षर या इमोजी।
- तस्वीर चुनें, या अक्षर या इमोजी लिखें। पृष्ठभूमि का रंग और अक्षरों का रंग तय करें।
- थीम का रंग और साइट का नाम लिखें, फिर आइकन बनाएँ पर क्लिक करें।
- ZIP डाउनलोड करें। फ़ाइलें अपनी साइट के सबसे ऊपर वाले फ़ोल्डर में रखें, और हर पेज के head में HTML टैग चिपकाएँ।
फ़ाइलें और उनके आकार
favicon.ico में तीन तस्वीरें हैं, 16, 32 और 48 पिक्सल की, ताकि ब्राउज़र टैब, बुकमार्क और Windows हर एक को उपयुक्त आकार दें। apple-touch-icon.png iPhone या iPad की होम स्क्रीन के लिए 180 पिक्सल का है। android-chrome-192x192.png और android-chrome-512x512.png मेनिफ़ेस्ट में दिए गए Android आइकन हैं। site.webmanifest ऐप का नाम और उसके रंग बताती है।
पारदर्शिता और पृष्ठभूमि
favicon अपने पारदर्शी हिस्से रखता है, इसलिए लोगो उस रंग पर बैठता है जो ब्राउज़र दिखाता है। Apple और Android आइकन पृष्ठभूमि के रंग से भरे जाते हैं, क्योंकि Apple टच आइकन का पारदर्शी कोना iPhone और iPad पर काला दिखता है।
फ़ाइलें कहाँ जाती हैं
फ़ाइलें अपनी वेबसाइट के सबसे ऊपर वाले फ़ोल्डर में रखें, ताकि /favicon.ico और /site.webmanifest पते काम करें। ब्राउज़र आइकन लंबे समय तक कैश में रखते हैं: बदलाव के बाद लिंक में संस्करण संख्या जोड़ें, या नया आइकन देखने के लिए कैश साफ करें।
उदाहरण: गहरे नीले पर अक्षर FT
अक्षर या इमोजी वाला स्रोत चुनें, FT लिखें और गहरे नीले पृष्ठभूमि को रखें। टूल अक्षर गोल वर्ग के बीच में बनाता है और उन्हें वर्ग में फिट करता है, इसलिए वे 16 पिक्सल के favicon में भी पढ़ने लायक रहते हैं।
अक्सर पूछे जाने वाले सवाल
क्या favicon बनाते समय मेरी तस्वीर अपलोड होती है?
नहीं। आइकन आपके ब्राउज़र में बनते हैं और आपके डिवाइस पर ZIP में बँध जाते हैं। जाँचने के लिए पेज खुलने के बाद इंटरनेट बंद करें और आइकन का एक सेट बनाएँ।
ब्राउज़र टैब आइकन के लिए कौन-सी फ़ाइल लेता है?
ब्राउज़र favicon.ico लेते हैं, या पेज का एक link टैग जो PNG या SVG फ़ाइल की ओर इशारा करता है। यह टूल जो टैग बनाता है, वे favicon.ico और Apple आइकन के नाम लेते हैं, ताकि हर ब्राउज़र को उपयुक्त आकार का आइकन मिले।
16 पिक्सल पर मेरा favicon धुंधला क्यों दिखता है?
छोटे आइकन में बहुत कम पिक्सल होते हैं, इसलिए पतली रेखाएँ और छोटे अक्षर धुंधले हो जाते हैं। मोटी रेखाओं वाला सरल आकार लें, या ज्यादा-से-ज्यादा दो अक्षर, और ICO फ़ाइल की 16 और 32 पिक्सल वाली तस्वीरें देखें।
Apple आइकन में पृष्ठभूमि का रंग क्यों है?
पारदर्शी कोने वाला Apple टच आइकन iPhone और iPad पर वह कोना काला दिखाता है। टूल पूरे वर्ग को आपके चुने पृष्ठभूमि के रंग से भरता है।
पेज के head में क्या जाता है?
HTML टैग वाले बॉक्स की चार पंक्तियाँ हर पेज के head एलिमेंट में चिपकाएँ। वे favicon.ico, Apple आइकन, मेनिफ़ेस्ट और थीम के रंग को जोड़ती हैं।
वेब ऐप मेनिफ़ेस्ट कैसे इस्तेमाल होता है?
site.webmanifest को अपनी साइट के सबसे ऊपर वाले फ़ोल्डर में रखें। जब कोई दर्शक साइट को ऐप के रूप में इंस्टॉल करता है, तो ब्राउज़र उसे पढ़ता है; वह ऐप का नाम, छोटा नाम और रंग बताती है, और दो Android आइकन की सूची देती है।
स्रोत
- MDN (अंग्रेजी में): the link element, including the icon and manifest links
- MDN (अंग्रेजी में): the web app manifest
- Microsoft Learn (अंग्रेजी में): Icons, the ICONDIR and ICONDIRENTRY structures of the ICO file
आँकड़े और टेक्स्ट आखिरी बार मंगलवार, 10 नवंबर 2026 को जाँचे गए।