HTML में फेविकॉन कैसे जोड़ें (और किन rel टैग का उपयोग करें)

सही link टैग, सही प्लेसमेंट, और फेविकॉन को कैसे ठीक करें जो दिखाने से इनकार करते हैं

अपनी वेबसाइट पर फेविकॉन जोड़ना वेब विकास में सबसे सरल कार्यों में से एक होना चाहिए, फिर भी यह डेवलपर्स को अक्सर परेशान करता है। किन <link> टैग का उपयोग करें, भ्रमित करने वाले rel एट्रिब्यूट मान, और ब्राउज़र जो जिद्दी तरीके से पुराना आइकन कैश करते हैं, के बीच परस्पर विरोधी सलाह के बीच, फेविकॉन को वास्तव में दिखाना अनुमान लगाने के खेल की तरह महसूस हो सकता है।

सच्चाई यह है कि अधिकांश वेबसाइटों के लिए फेविकॉन सेटअप को एक सिंगल फाइल और एक सिंगल HTML टैग तक कम किया जा सकता है। यह गाइड शोर को काटती है और आपको बिल्कुल वही देती है जो आपको चाहिए: न्यूनतम व्यावहारिक सेटअप, सबसे उपयोगी rel टैग भिन्नताएं, और कैशिंग समस्याओं से निपटने के लिए स्पष्ट निर्देश जो आपके नए फेविकॉन को अदृश्य बनाते हैं।

यदि आपके पास अभी तक favicon.ico फाइल नहीं है, तो एक मिनट से कम में Any2ICO के साथ एक बनाएं। यह PNG, SVG, JPG, WebP, और अन्य फॉर्मेट स्वीकार करता है, और एक मल्टी-साइज ICO फाइल बनाता है जो हर जगह काम करती है। फिर अपने HTML में इसे वायर करने के लिए यहां वापस आएं।

सबसे सरल फेविकॉन सेटअप

टैग भिन्नताओं और एज केस में गोता लगाने से पहले, यहां वह दृष्टिकोण है जो वेबसाइटों की भारी बहुमत के लिए काम करता है। इसे एक फाइल और HTML की एक पंक्ति की आवश्यकता है।

अपने डोमेन की रूट में favicon.ico रखें। अपनी favicon.ico फाइल अपलोड या तैनात करें ताकि यह https://yourdomain.com/favicon.ico पर सुलभ हो। यह वह पथ है जिसे ब्राउज़र 1990 के दशक के अंत से डिफ़ॉल्ट रूप से जांचते हैं। यहां तक कि बिना किसी HTML टैग के इसकी ओर इशारा किए, अधिकांश ब्राउज़र स्वचालित रूप से इस स्थान पर फेविकॉन ढूंढेंगे और प्रदर्शित करेंगे। यह सम्मेलन ब्राउज़र व्यवहार में बेक किया गया है और दूर नहीं जा रहा है।

अपने HTML head में एक link टैग जोड़ें। जबकि रूट-पथ सम्मेलन अपने आप काम करता है, एक स्पष्ट टैग जोड़ने से सभी अस्पष्टता दूर हो जाती है और ब्राउज़रों, सबडोमेन, और सिंगल-पेज एप्लिकेशन में सुसंगत व्यवहार सुनिश्चित होता है जहां दस्तावेज़ रूट सीधे सर्वर रूट से मैप नहीं हो सकता है।

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Your Page Title</title>
  <link rel="icon" href="/hi/favicon.ico" sizes="any">
</head>
<body>
  <!-- your content -->
</body>
</html>

वह सिंगल <link> टैग हर प्रमुख ब्राउज़र के लिए पर्याप्त है: Chrome, Firefox, Safari, Edge, और यहां तक कि Internet Explorer के पुराने संस्करण। sizes="any" एट्रिब्यूट ब्राउज़र को बताता है कि ICO फाइल में कई रिज़ॉल्यूशन हैं और ब्राउज़र को वर्तमान संदर्भ के लिए सबसे उपयुक्त चुनना चाहिए, चाहे वह 16x16 टैब आइकन हो या 32x32 बुकमार्क आइकन।

यह वह सेटअप है जिसकी हम अधिकांश वेबसाइटों के लिए सिफारिश करते हैं। यह सरल, विश्वसनीय, और सार्वभौमिक रूप से समर्थित है। आप यहां रुक सकते हैं और आपका फेविकॉन वस्तुतः हर परिदृश्य में सही ढंग से काम करेगा।

न्यूनतम टैग सेट

वेबसाइटों की विशाल बहुमत के लिए, आपको केवल एक फाइल (रूट पर favicon.ico) और एक टैग (<link rel="icon" href="/hi/favicon.ico" sizes="any">) की आवश्यकता है। यह सिंगल-लाइन दृष्टिकोण हर आधुनिक ब्राउज़र में काम करता है और पुराने में शानदार ढंग से degrades करता है। जब तक आपके पास अधिक टैग जोड़ने का विशिष्ट कारण न हो, अपने फेविकॉन सेटअप को जटिल न बनाएं।

सामान्य फेविकॉन rel टैग और उनका उपयोग कब करें

यदि आप ऑनलाइन "फेविकॉन HTML टैग" खोजते हैं, तो आपको विभिन्न rel मान, type एट्रिब्यूट, और sizes घोषणाओं के साथ दर्जनों भिन्नताएं मिलेंगी। इनमें से अधिकांश विशिष्ट एज केस या ऐतिहासिक ब्राउज़र विचित्रताओं के लिए बनाए गए थे। यहां उन टैग का व्यावहारिक विवरण है जिनका आप सामना करने की सबसे अधिक संभावना रखते हैं और प्रत्येक वास्तव में कब उपयोगी है।

टैग	उद्देश्य	आवश्यक?
`<link rel="icon" href="/hi/favicon.ico" sizes="any">`	प्राथमिक फेविकॉन घोषणा। ब्राउज़रों को आपकी मल्टी-साइज ICO फाइल की ओर इशारा करता है।	हां (अनुशंसित)
`<link rel="icon" type="image/png" href="/hi/icon-32.png" sizes="32x32">`	विशिष्ट साइज पर PNG फेविकॉन प्रदान करता है। कुछ आधुनिक ब्राउज़र ICO पर PNG पसंद करते हैं।	नहीं (वैकल्पिक वृद्धि)
`<link rel="icon" type="image/svg+xml" href="/hi/icon.svg">`	SVG फेविकॉन जो किसी भी साइज पर पूरी तरह से स्केल करता है। Chrome, Firefox, और Edge में समर्थित।	नहीं (वैकल्पिक, सार्वभौमिक नहीं)
`<link rel="apple-touch-icon" href="/hi/apple-touch-icon.png">`	iOS होम स्क्रीन बुकमार्क के लिए आइकन। Apple डिवाइस इसका उपयोग करते हैं जब उपयोगकर्ता अपनी होम स्क्रीन पर आपकी साइट जोड़ते हैं।	नहीं (केवल iOS को लक्षित करने पर)
`<link rel="shortcut icon" href="/hi/favicon.ico">`	पुरानी सिंटैक्स। `shortcut` कीवर्ड गैर-मानक है और आधुनिक ब्राउज़रों द्वारा अनदेखा किया जाता है।	नहीं (पुराना)

type एट्रिब्यूट आइकन फाइल के MIME प्रकार को निर्दिष्ट करता है। ICO फाइलों के लिए, आप इसे पूरी तरह से छोड़ सकते हैं क्योंकि ब्राउज़र स्वचालित रूप से ICO फॉर्मेट का पता लगाते हैं। PNG फेविकॉन के लिए, type="image/png" का उपयोग करें। SVG के लिए, type="image/svg+xml" का उपयोग करें।

sizes एट्रिब्यूट ब्राउज़र को बताता है कि आइकन कौन से आयाम प्रदान करता है। मल्टी-साइज ICO फाइल के लिए, sizes="any" सबसे साफ दृष्टिकोण है। सिंगल-साइज PNG फाइलों के लिए, sizes="32x32" की तरह सटीक आयाम निर्दिष्ट करें। यदि आप विभिन्न साइज के साथ कई आइकन टैग प्रदान करते हैं, तो ब्राउज़र उसे चुनेगा जो उसे आवश्यकता के सबसे करीब है।

व्यवहार में, इस तालिका की पहली पंक्ति अधिकांश साइटों की जरूरत है। यदि आप iOS होम स्क्रीन उपस्थिति की परवाह करते हैं तो apple-touch-icon पंक्ति जोड़ें। PNG और SVG पंक्तियां उन डेवलपर्स के लिए वैकल्पिक वृद्धि हैं जो आइकन डिलीवरी पर बारीक नियंत्रण चाहते हैं।

Any2ICO के साथ favicon.ico बनाएं

कैशिंग और "फेविकॉन नहीं दिख रहा है"

आपने अपना नया फेविकॉन तैनात किया, पेज को रिफ्रेश किया, और पुराना आइकन अभी भी ब्राउज़र टैब से आपको घूर रहा है। यह आपके कोड में बग नहीं है। यह लगभग निश्चित रूप से एक कैशिंग समस्या है, और यह सबसे आम कारण है कि डेवलपर्स सोचते हैं कि उनका फेविकॉन सेटअप टूटा हुआ है जब यह वास्तव में पूरी तरह से काम कर रहा है।

ब्राउज़र फेविकॉन को आक्रामक रूप से कैश करते हैं। नियमित पेज संपत्तियों के विपरीत, फेविकॉन अक्सर अलग से और बहुत लंबी अवधि के लिए कैश किए जाते हैं। उदाहरण के लिए Chrome, एक समर्पित डेटाबेस में फेविकॉन संग्रहीत करता है जो हमेशा सामान्य पेज रिफ्रेश का जवाब नहीं देता है। Firefox और Safari में समान व्यवहार है। इसका मतलब है कि आपके सर्वर पर फाइल को बदलने के बाद भी, ब्राउज़र घंटों या दिनों तक पुराना आइकन प्रदर्शित करना जारी रख सकता है।

हार्ड रिफ्रेश: कैश को बायपास करने और सर्वर से सभी संपत्तियों को फिर से लोड करने के लिए Ctrl+Shift+R (Windows/Linux) या Cmd+Shift+R (macOS) दबाएं। यह अधिकांश पेज संसाधनों के लिए काम करता है लेकिन हमेशा फेविकॉन कैश को विशेष रूप से साफ नहीं करता है।

Incognito विंडो: अपनी साइट को प्राइवेट या incognito ब्राउज़िंग विंडो में खोलें। यह पूरी तरह से खाली कैश के साथ शुरू होता है और सर्वर से फेविकॉन को ताज़ा लोड करेगा। यदि आप incognito मोड में सही फेविकॉन देखते हैं, तो आपका सेटअप सही है और सामान्य ब्राउज़िंग सत्र को बस परिवर्तन को उठाने के लिए समय चाहिए।

मैन्युअल रूप से ब्राउज़र कैश साफ करें: यदि incognito नए फेविकॉन की पुष्टि करता है लेकिन आपका नियमित सत्र अभी भी पुराना दिखाता है, तो अपने ब्राउज़र की कैश की गई इमेजेज और फाइलें साफ करें। Chrome में, Settings, Privacy and Security, Clear browsing data पर जाएं, और Cached images and files चुनें। साफ करने के बाद, अपनी साइट को फिर से लोड करें।

कैश-बस्टिंग क्वेरी स्ट्रिंग जोड़ें: विकास के दौरान अस्थायी उपाय के रूप में, आप ब्राउज़र को फेविकॉन को नए संसाधन के रूप में मानने के लिए मजबूर करने के लिए क्वेरी स्ट्रिंग जोड़ सकते हैं: <link rel="icon" href="/hi/favicon.ico?v=2" sizes="any">। हर बार जब आप फेविकॉन अपडेट करते हैं तो संस्करण संख्या बढ़ाएं। एक बार जब आप आइकन से संतुष्ट हों तो क्वेरी स्ट्रिंग हटा दें, या इसे स्थायी संस्करण रणनीति के रूप में रखें।

कैशिंग समस्याएं

फेविकॉन लगभग किसी भी अन्य वेब संपत्ति की तुलना में अधिक आक्रामक रूप से कैश किए जाते हैं। एक सामान्य पेज रिफ्रेश अधिकांश ब्राउज़रों में फेविकॉन को अपडेट नहीं करेगा। नया आइकन तैनात करने के बाद हमेशा incognito विंडो में टेस्ट करें। यदि आप डिज़ाइन पर पुनरावृत्ति कर रहे हैं, तो ब्राउज़रों को अपडेट की गई फाइल लाने के लिए मजबूर करने के लिए href पर ?v=2 जैसी कैश-बस्टिंग क्वेरी स्ट्रिंग का उपयोग करें। बस यह मत मानिए कि आपका सेटअप गलत है क्योंकि टैब अभी भी पुराना आइकन दिखाता है।

साइज और फाइल विकल्प: ICO बनाम PNG

क्या आपको ICO फाइल, PNG फाइल, या दोनों का उपयोग करना चाहिए? जवाब इस बात पर निर्भर करता है कि आप अपने सेटअप में कितनी जटिलता चाहते हैं और आपको किन ब्राउज़रों का समर्थन करने की आवश्यकता है।

ICO सार्वभौमिक विकल्प है। ICO फॉर्मेट 1999 में Internet Explorer 5 ने फेविकॉन पेश किए तब से मानक फेविकॉन फॉर्मेट रहा है। हर ब्राउज़र जो फेविकॉन का समर्थन करता है वह ICO का समर्थन करता है। एक सिंगल ICO फाइल कई साइज (16x16, 32x32, 48x48, और अधिक) रख सकती है, इसलिए ब्राउज़र के पास हमेशा सही रिज़ॉल्यूशन उपलब्ध होता है बिना आपको प्रत्येक साइज के लिए अलग फाइलें बनाए रखने की आवश्यकता के। सरलता और अधिकतम संगतता के लिए, ICO सबसे सुरक्षित दांव है।

PNG एक आधुनिक विकल्प है। Chrome, Firefox, Safari, और Edge के सभी वर्तमान संस्करण <link rel="icon" type="image/png"> टैग के माध्यम से PNG फेविकॉन का समर्थन करते हैं। PNG फेविकॉन बनाना थोड़ा सरल है (एक साइज पर एक सिंगल PNG फाइल) लेकिन आपको प्रत्येक साइज के लिए एक अलग फाइल और टैग की आवश्यकता है जिसे आप प्रदान करना चाहते हैं। इसका मतलब आपके HTML head में दो या तीन अतिरिक्त link टैग हो सकते हैं।

SVG नवीनतम विकल्प है। SVG फेविकॉन Chrome, Firefox, और Edge में समर्थित हैं, लेकिन 2025 की शुरुआत तक Safari में नहीं। SVG फेविकॉन किसी भी साइज पर पूरी तरह से स्केल करता है, जो उच्च-DPI डिस्प्ले के लिए आकर्षक है। हालांकि, Safari समर्थन की कमी का मतलब है कि आपको अभी भी ICO या PNG फॉलबैक की आवश्यकता है।

अधिकांश वेबसाइटों के लिए, हम व्यावहारिक दृष्टिकोण की सिफारिश करते हैं: अपने प्राथमिक फेविकॉन के रूप में मल्टी-साइज ICO फाइल का उपयोग करें और वैकल्पिक रूप से वृद्धि के रूप में PNG या SVG आइकन जोड़ें। यह ICO फाइल के माध्यम से आपको सार्वभौमिक संगतता देता है और अतिरिक्त फॉर्मेट के माध्यम से आधुनिक अनुकूलन। कौन से साइज शामिल करने हैं और क्यों के विस्तृत विवरण के लिए, हमारी फेविकॉन साइज समझाया गया गाइड देखें।

Any2ICO के साथ अपना फेविकॉन बनाएं