HTML में फ़ेविकॉन कैसे जोड़ें
तीन टैग अधिकांश साइटों को कवर करते हैं; पांच टैग आपको PWA-ग्रेड सेटअप देते हैं। यह ट्यूटोरियल प्रत्येक विशेषता की व्याख्या करता है, सामान्य स्टैक के लिए कॉपी-पेस्ट स्निपेट दिखाता है, FAQ का उत्तर देता है, और कैशिंग समस्याओं को ठीक करता है जो आइकन को अटका हुआ दिखाते हैं।
न्यूनतम टैग
सबसे छोटी वैध घोषणा <head> में एक पंक्ति है:
<link rel="icon" href="/favicon.ico">
ब्राउज़र टैब डिस्प्ले के लिए उस यूआरएल को लाने के लिए rel='icon' को एक संकेत के रूप में मानते हैं। रूट-सापेक्ष पथ वर्तमान पृष्ठ पथ की परवाह किए बिना / से शुरू होते हैं।
इस टैग के साथ भी, कई ग्राहक अभी भी /favicon.ico की स्वचालित रूप से जांच करते हैं। अंतर्निहित अनुरोधों के लिए फ़ाइल को साइट रूट पर रखें।
Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.
आधुनिक अनुशंसित सेट
डेस्कटॉप, iOS और डार्क-मोड टैब पर स्पष्ट रेंडरिंग के लिए, इसका उपयोग करें:
<लिंक rel='आइकन' href='/favicon.ico' आकार='कोई भी'>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
आदेश पूर्णता से कम मायने रखता है। ब्राउज़र सर्वोत्तम समर्थित प्रकार चुनते हैं: SVG जहां उपलब्ध हो, अन्यथा एक मिलान PNG या ICO फ्रेम।
SVG लाइन पर type='image/svg+xml' जोड़ें ताकि MIME सूँघने से फ़ाइल कभी गलत लेबल न हो।
PWA इंस्टाल संकेत
अपना मेनिफेस्ट लिंक करें: <link rel="manifest" href="/site.webmanifest">.
site.webmanifest के अंदर, स्रोत, आकार, प्रकार और उद्देश्य के साथ आइकन घोषित करें। न्यूनतम उपयोगी प्रविष्टियाँ 192×192 और 512×512 PNG फ़ाइलें हैं।
वैकल्पिक थीम पॉलिश: <meta name="theme-color" content="#0f172a"> इंस्टॉल फ़्लो के दौरान Android स्टेटस बार को आपके ब्रांड के साथ संरेखित करता है।
उदाहरण कॉपी-पेस्ट करें
सादा HTML साइट - <head> के अंदर पेस्ट करें:
<लिंक rel='आइकन' href='/favicon.ico' आकार='कोई भी'>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Next.js ऐप राउटर - मेटाडेटा या मैन्युअल <head> ब्लॉक के अंदर ऐप/layout.tsx में समान लाइनें जोड़ें। फ़ाइलें /सार्वजनिक में रहती हैं।
Create React App - आइकन को /public में रखें और public/index.html संपादित करें। सीआरए प्रोडक्शन बिल्ड में डोमेन रूट पर /पब्लिक की सेवा करता है।
प्रत्येक गुण को समझना
rel='आइकन' favicon उम्मीदवार को चिह्नित करता है। rel='apple-touch-icon' iOS-विशिष्ट होम-स्क्रीन आइकन है। rel='manifest' PWA मेटाडेटा के साथ JSON को इंगित करता है।
आकार ब्राउज़र को बताता है कि PNG किस रिज़ॉल्यूशन का प्रतिनिधित्व करता है। जब आप स्पष्ट रूप से एकाधिक आकार घोषित करते हैं तो यह PNG आइकन के लिए आवश्यक है।
href उत्पादन में पहुंच योग्य होना चाहिए। favicons के लिए तृतीय-पक्ष CDN से हॉटलिंकिंग से बचें - आप रीब्रांड के दौरान पूर्ण नियंत्रण चाहते हैं।
अक्सर पूछे जाने वाले प्रश्नों
क्या मैं href में पूर्ण URL का उपयोग कर सकता हूँ? हां, लेकिन रूट-रिलेटिव /favicon.ico स्टेजिंग और प्रोडक्शन डोमेन में सरल है।
क्या मुझे rel='शॉर्टकट आइकन' और rel='आइकन' दोनों की आवश्यकता है? नहीं, rel='आइकन' मानक है; शॉर्टकट अप्रचलित है.
<head> वास्तव में कहाँ है? <html> का सीधा बच्चा, <body> से पहले। कुछ ढाँचे इसे लेआउट घटकों के माध्यम से इंजेक्ट करते हैं।
क्या favicons को CDN पर रहना चाहिए? वे ऐसा कर सकते हैं, लेकिन माइग्रेट करते समय सभी <link> URL को एक साथ अपडेट करें। जड़-सापेक्ष पथ उस समस्या से बचते हैं।
समस्या निवारण
आइकन होमपेज पर काम करता है लेकिन /ब्लॉग/स्लग पर नहीं: आपने बिना लीड स्लैश के favicon.ico जैसे सापेक्ष href का उपयोग किया है। इसके बजाय /favicon.ico का उपयोग करें।
Safari पुराना आइकन दिखाता है: वेबसाइट डेटा साफ़ करें या फ़ाइल का एक बार नाम बदलें। Safari कैश favicons HTML से अधिक लंबा है।
वैध HTML लेकिन नेटवर्क टैब में 404: फ़ाइल सर्वर रूट या गलत केस पर तैनात नहीं है (लिनक्स पर Favicon.ico बनाम favicon.ico)।
SVG को नजरअंदाज किया गया: लापता प्रकार = "छवि/एसवीजी+एक्सएमएल" या सर्वर गलत सामग्री-प्रकार भेजता है। nginx या Apache में MIME मैपिंग ठीक करें।
फ़्रेमवर्क-विशिष्ट प्लेसमेंट
Vite / Vue / React SPA: आइकन को /public में रखें और /favicon.ico को Index.html में संदर्भित करें। डेव सर्वर और प्रोडक्शन बिल्ड दोनों डोमेन रूट पर सर्व/पब्लिक करते हैं।
Next.js ऐप राउटर: मेटाडेटा एपीआई के माध्यम से / ऐप में आइकन जोड़ें या स्थिर फ़ाइलों को / सार्वजनिक में रखें। दोनों स्थानों पर डुप्लिकेट टैग बनाने से बचें।
अगला: सभी मार्गों पर केंद्रीकृत टैग प्रबंधन के लिए nuxt.config.ts में /public का उपयोग करें या app.head.link कॉन्फ़िगर करें।
SvelteKit: स्थैतिक/फ़ोल्डर मानचित्र में स्थैतिक संपत्तियाँ /। संपूर्ण ऐप के लिए app.html <head> को एक बार अपडेट करें।
एस्ट्रो: सार्वजनिक/निर्देशिका और आपके लेआउट में एक साझा हेड घटक यह सुनिश्चित करता है कि प्रत्येक पृष्ठ में कॉपी-पेस्ट बहाव के बिना समान आइकन टैग शामिल हों।
WordPress और अन्य CMS उपयोगकर्ताओं को मैन्युअल टैग की बिल्कुल भी आवश्यकता नहीं हो सकती है - यदि कोर आपके लिए Site Icon मार्कअप उत्पन्न करता है तो हमारा WordPress ट्यूटोरियल देखें।
आपके HTML सेटअप को मान्य किया जा रहा है
यह पुष्टि करने के लिए कि तैनात HTML आपके रेपो से मेल खाता है, उत्पादन पर पेज स्रोत देखें, लोकलहोस्ट नहीं। सीआई पाइपलाइनें कभी-कभी प्रति वातावरण में अलग-अलग लेआउट इंजेक्ट करती हैं।
<link href> में लौटाए गए प्रत्येक आइकन URL को लाने के लिए कर्ल का उपयोग करें। सही सामग्री-लंबाई के साथ 200 स्थिति का मतलब है कि पथ वास्तविक है, न कि केवल घोषित।
favicons के लिए W3C मार्कअप सत्यापन वैकल्पिक है, लेकिन अमान्य <head> नेस्टिंग (<body> के अंदर टैग) के कारण ब्राउज़र आपके आइकन को पूरी तरह से अनदेखा कर सकता है।
यदि इंस्टॉल मायने रखता है तो लाइटहाउस PWA ऑडिट चलाएं - यह टैब ठीक दिखने पर भी गायब मेनिफेस्ट आइकन को चिह्नित करता है।
पृष्ठ को बुकमार्क करें, ब्राउज़र को पूरी तरह से बंद करें, फिर से खोलें और पुष्टि करें कि बुकमार्क बार अभी भी आपका चिह्न दिखाता है। यह लगातार favicon कैश व्यवहार का परीक्षण करता है।
सुरक्षा शीर्षलेख और आइकन पथ
सामग्री-सुरक्षा-नीति डिफ़ॉल्ट-src समान मूल से favicon लोड को ब्लॉक नहीं करता है। क्रॉस-ओरिजिन आइकन यूआरएल को स्पष्ट img-src या डिफ़ॉल्ट-src भत्ते की आवश्यकता होती है।
उपसंसाधन अखंडता को शायद ही कभी favicons पर लागू किया जाता है। समान-मूल होस्टिंग सबसे सरल सुरक्षित डिफ़ॉल्ट बनी हुई है।
यदि आइकन सीडीएन उपडोमेन पर रहते हैं, तो href में पूर्ण https:// URL का उपयोग करें और सुनिश्चित करें कि CORS अप्रासंगिक है - favicons छवियों के रूप में लोड होते हैं, लाने के लिए नहीं।
डेटा से बचें: उत्पादन HTML में URI favicons। वे HTML कैश को फुलाते हैं, CDN कैशिंग को बायपास करते हैं और CSP को जटिल बनाते हैं।
टैग ऑर्डर और डुप्लिकेट
समान href अपशिष्ट बाइट्स के साथ डुप्लिकेट rel=icon टैग लेकिन शायद ही कभी रेंडरिंग टूटती है। डुप्लिकेट परस्पर विरोधी hrefs डिबगिंग को भ्रमित करते हैं - पुराने टैग हटाएँ।
कुछ WordPress थीम Site Icon टैग प्रिंट करते हैं जबकि प्लगइन्स एक और सेट जोड़ते हैं। प्लगइन इंस्टॉल होने के बाद डुप्लिकेट का पता लगाने के लिए व्यू सोर्स का उपयोग करें।
सिर में बड़े स्क्रिप्ट ब्लॉक से पहले आइकन लिंक रखें। शुरुआती खोज से पहले पेंट करने में मदद मिलती है, भले ही आइकन कम प्राथमिकता वाले डाउनलोड हों।
HTML5 को शून्य तत्वों पर स्लैश बंद करने की आवश्यकता नहीं है। <link ...> और <link ... /> दोनों मान्य हैं।
विरासत और किनारे के मामले
IE सशर्त टिप्पणियाँ मर चुकी हैं। अप्रचलित ब्राउज़रों के लिए आइकन टैग न लपेटें.
हेड में बेस टैग सापेक्ष href रिज़ॉल्यूशन बदलता है। / से शुरू होने वाले चिह्न पथ प्रतिरक्षित हैं; आधार सेट होने पर सापेक्ष favicon.ico नेस्टेड मार्गों पर टूट जाता है।
शैडो DOM और वेब घटक पेज favicon को शैडो रूट्स में इनहेरिट नहीं करते हैं - दस्तावेज़-स्तरीय आइकन अभी भी टैब पर लागू होता है।
iframe एंबेड एम्बेडेड दस्तावेज़ favicon दिखाता है, मूल नहीं। यदि आप दोनों को नियंत्रित करते हैं तो प्रत्येक फ़्रेम को अपने स्वयं के टैग की आवश्यकता होती है।
स्थानीय फ़ाइल:// परीक्षण /favicon.ico का समाधान नहीं कर सकता है। यथार्थवादी आइकन व्यवहार के लिए स्थानीय डेव सर्वर का उपयोग करें।
बुकमार्कलेट और ब्राउज़र एक्सटेंशन आपकी साइट favicon को अन्य उपयोगकर्ताओं के लिए नहीं बदल सकते - केवल आपका स्थानीय क्रोम। सही टैग सर्वर-साइड भेजें।