अपनी वेबसाइट में Favicon कैसे जोड़ें (चरण-दर-चरण)
खाली tab से पिक्सेल-परफ़ेक्ट ब्रांडिंग तक चार चरण। किसी भी HTML साइट, CMS या framework के लिए काम करता है।
पहले आपको क्या चाहिए
अब केवल एक 16x16 favicon पर्याप्त नहीं है। आधुनिक browsers, iOS, Android और Windows हर एक अलग-अलग आकार और formats माँगते हैं। कोई भी tag जोड़ने से पहले, सुनिश्चित करें कि आपके पास आइकनों का पूरा सेट है।
न्यूनतम सेट
| फ़ाइल | आकार | किसे इसकी ज़रूरत है |
|---|---|---|
| favicon.ico | मल्टी-रिज़ॉल्यूशन | वे browsers और crawlers जो डिफ़ॉल्ट रूप से /favicon.ico माँगते हैं |
| favicon-16x16.png | 16x16 | Browser tabs और address bar |
| favicon-32x32.png | 32x32 | Retina tabs, bookmarks और desktop शॉर्टकट |
| apple-touch-icon.png | 180x180 | iOS होम स्क्रीन |
| Manifest आइकन | 192x192 | Android होम स्क्रीन, web manifest से रेफ़र किया गया |
ये आकार असल में कैसे दिखते हैं
चार चरण
- 1
अपने favicon की फ़ाइलें जेनरेट करें
किसी generator को एक ही बार में हर आकार, .ico स्प्राइट और एक ट्यून किया गया manifest.json तैयार करने दें। एक logo, एक स्क्रीनशॉट या यहाँ तक कि एक emoji डालें और पूरी किट डाउनलोड करें। आइकन बनाने में नए हैं? favicon कैसे बनाएँ से शुरू करें।
- 2
फ़ाइलों को अपनी साइट root में जोड़ें
डाउनलोड की गई फ़ाइलों को उस directory में कॉपी करें जो आपके domain root को serve करती है। स्टैटिक साइट पर यह root फ़ोल्डर होता है; अधिकांश frameworks में यह public/ directory होती है। लक्ष्य यह है कि https://yoursite.com/favicon.ico सीधे रिज़ॉल्व हो।
- 3
अपने <head> में link tags जोड़ें
हर पेज पर document के <head> के अंदर <link> tags (icon, apple-touch-icon और manifest) से प्रत्येक आइकन को रेफ़र करें, जिसका आमतौर पर मतलब है एक साझा template या layout।
- 4
जाँचें कि यह काम कर रहा है
Deploy करें, फिर hard-refresh करके tab देखें। सबसे भरोसेमंद जाँच एक स्वचालित स्कैन है जो पुष्टि करती है कि हर tag रिज़ॉल्व होता है और किसी भी अनुपस्थित प्लेटफ़ॉर्म आइकन को फ़्लैग करती है।
Link tags
<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">इन्हें हर पेज के <head> तत्व के अंदर पेस्ट करें। Manifest link ही आपको इंस्टॉल प्रॉम्प्ट और होम-स्क्रीन आइकन देता है। देखें manifest.json क्या है।
प्लेटफ़ॉर्म-विशिष्ट शॉर्टकट
कोई framework या CMS इस्तेमाल कर रहे हैं? उनमें से कई अपनी-अपनी परंपराओं के साथ head tags को आपके लिए संभाल लेते हैं। प्लेटफ़ॉर्म गाइड Next.js, React, WordPress और Shopify को कवर करती हैं।
आम गलतियाँ
| गलती | समाधान |
|---|---|
| Browser caching | पुराने favicons बने रहते हैं। Hard-refresh करें, या link href में ?v=2 जोड़ें। |
| गलत path | शुरुआती स्लैश मायने रखता है। /favicon.ico root से serve होता है, मौजूदा फ़ोल्डर से नहीं। |
| apple-touch-icon का अभाव | इसके बिना iOS होम स्क्रीन एक धुँधले स्क्रीनशॉट पर लौट जाती है। |
अक्सर पूछे जाने वाले प्रश्न
मैं favicon फ़ाइल कहाँ रखूँ?
favicon.ico और बाकी आइकन फ़ाइलों को अपनी साइट की root directory में (या अधिकांश frameworks के लिए public/ फ़ोल्डर में) रखें ताकि वे domain root से serve हों, जैसे https://example.com/favicon.ico।
क्या मुझे अब भी favicon.ico फ़ाइल की ज़रूरत है?
हाँ। Browsers और crawlers अब भी डिफ़ॉल्ट रूप से /favicon.ico माँगते हैं, इसलिए आधुनिक PNG और SVG आइकनों के साथ एक मल्टी-रिज़ॉल्यूशन .ico भेजना आपको सबसे व्यापक अनुकूलता देता है।
जोड़ने के बाद भी मेरा favicon क्यों नहीं दिख रहा?
Browsers favicons को आक्रामक रूप से cache करते हैं। Hard-refresh करें, link में ?v=2 जैसी version query string जोड़ें और पुष्टि करें कि फ़ाइल path सही है। हर कारण के लिए हमारी favicon समस्या-निवारण गाइड देखें।