React के लिए फ़ेविकॉन
React आपके लिए `<head>` प्रस्तुत नहीं करता है - फ़ेविकॉन आपके स्थिर index.html में रहता है। अपने favicon.ico को /public फ़ोल्डर में छोड़ें, इसे index.html में लिंक करें, और आपका मूल काम पूरा हो जाएगा। आधुनिक सेटअप में डार्क-मोड समर्थन के साथ एक SVG वैरिएंट, एक 180×180 apple-touch-icon और PWA इंस्टाल प्रॉम्प्ट के लिए एक वेब मेनिफेस्ट भी शामिल है। favicon generator आपके लिए आवश्यक प्रत्येक फ़ाइल को एकल स्रोत छवि से तैयार करता है। संपूर्ण लिंक टैग संदर्भ के लिए how-to-add-favicon-html guide भी देखें।
Vite और Create React ऐप (CRA) दोनों में, /public निर्देशिका में रखी गई स्थिर फ़ाइलें बिना किसी बंडलर प्रोसेसिंग के सीधे रूट URL से परोसी जाती हैं। इसका मतलब है कि /public/favicon.ico https://yourdomain.com/favicon.ico पर पहुंच योग्य है, जो बिल्कुल वही पथ है जिसे ब्राउज़र फ़ेविकॉन के लिए सबसे पहले आज़माते हैं। बुनियादी .ico सेटअप के लिए किसी वेबपैक लोडर, वाइट प्लगइन या बिल्ड कॉन्फ़िगरेशन की आवश्यकता नहीं है।
जब आप `npm create vite@latest` के साथ एक नया Vite React प्रोजेक्ट बनाते हैं, तो मचान पहले से ही favicon.svg को /public में रखता है और इसे index.html में संदर्भित करता है। यह एक अच्छा प्रारंभिक बिंदु है, लेकिन डिफ़ॉल्ट SVG एक सामान्य वाइट आइकन है। इसे अपने स्वयं के SVG से बदलें और उन ब्राउज़रों के लिए एक बहु-आकार .ico फ़ॉलबैक जोड़ें जो SVG फ़ेविकॉन का समर्थन नहीं करते हैं।
React बनाएं ऐप स्कैफोल्ड में डिफ़ॉल्ट रूप से /public में एक favicon.ico शामिल होता है। इसे बदलने के लिए, बस फ़ाइल को अपने बहु-आकार .ico से अधिलेखित करें। CRA में /public में मैनिफ़ेस्ट.json भी शामिल है - अपनी स्वयं की PNG फ़ाइलों (192×192 और 512×512) को इंगित करने के लिए `icons` सरणी प्रविष्टियों को अपडेट करें। /public में index.html में पहले से ही CRA द्वारा डाला गया मेनिफेस्ट लिंक टैग है।
बहु-आकार .ico अभी भी सबसे महत्वपूर्ण फ़ाइल है। जो ब्राउज़र SVG फ़ेविकॉन का समर्थन नहीं करते - पुराने Safari संस्करण, कुछ एम्बेडिंग टूल और Windows शॉर्टकट निर्माण - स्वचालित रूप से /favicon.ico पर वापस आ जाते हैं। एक एकल .ico फ़ाइल 16×16, 32×32, 48×48, और 64×64 फ़्रेमों को बंडल करती है ताकि ब्राउज़र बिना किसी अतिरिक्त लिंक टैग के सही रिज़ॉल्यूशन चुन सके।
उच्च-DPI (रेटिना) डिस्प्ले के लिए, .ico के अतिरिक्त एक स्पष्ट PNG लिंक टैग जोड़ें। `<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>` ब्राउज़र को रेटिना स्क्रीन पर PNG का उपयोग करने के लिए कहता है जहां 2x आइकन समान-रिज़ॉल्यूशन .ico फ़्रेम की तुलना में अधिक तेज़ी से प्रस्तुत होता है। .ico और PNG दोनों को /public में रखें।
SVG फ़ेविकॉन React ऐप्स के लिए सर्वोत्तम भविष्य-प्रूफ समाधान प्रदान करते हैं। एक एकल SVG फ़ाइल किसी भी टैब आकार में स्पष्ट रूप से प्रस्तुत होती है और उपयोगकर्ता की रंग योजना के अनुसार अपने रंगों को अनुकूलित कर सकती है। index.html में `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>` जोड़ें। जो ब्राउज़र SVG फ़ेविकॉन का समर्थन करते हैं, वे .ico की तुलना में इसे पसंद करते हैं; ऐसे ब्राउज़र जो सीधे अगले लिंक टैग पर नहीं जाते।
React ऐप्स में डार्क-मोड SVG फ़ेविकॉन शक्तिशाली हैं क्योंकि लक्षित दर्शक अक्सर डेवलपर टूल और डार्क-मोड डेस्कटॉप का उपयोग करते हैं। अपने SVG के अंदर `@media (prefers-color-scheme: dark) { :root { fill: white; } }` (आपके आइकन की संरचना के अनुसार समायोजित) के साथ एक `<style>` ब्लॉक एम्बेड करें। यह एकल फ़ाइल बिना किसी JavaScript या अतिरिक्त टैग के प्रकाश और अंधेरे दोनों विषयों पर कार्य करती है।
यदि कोई मोबाइल उपयोगकर्ता आपके React ऐप को अपनी होम स्क्रीन पर सहेजेगा तो apple-touch-icon आवश्यक है। apple-touch-icon.png (180×180) को /public में रखें और `<link rel='apple-touch-icon' size='180x180' href='/apple-touch-icon.png'>` को index.html में जोड़ें। इसके बिना, iOS होम स्क्रीन पर आपके ब्रांड आइकन के बजाय ऐप का कम-रिज़ॉल्यूशन वाला स्क्रीनशॉट दिखाता है।
PWAs के रूप में तैनात React ऐप्स के लिए, आपके /public/manifest.json (या site.webmanifest) में 192×192 और 512×512 पर आइकन प्रविष्टियां शामिल होनी चाहिए। ये आकार Android होम-स्क्रीन इंस्टॉल प्रॉम्प्ट और Chrome PWA इंस्टॉल डायलॉग चलाते हैं। favicon generator, PNG और एक पहले से भरे हुए मेनिफेस्ट टेम्पलेट दोनों को आउटपुट करता है जिसे आप सीधे /public में छोड़ सकते हैं।
React SPA परिनियोजन में फ़ेविकॉन के लिए रूटिंग मायने रखती है। पथ /favicon.ico सीधे आपके होस्ट द्वारा प्रस्तुत किया जाना चाहिए, React राउटर द्वारा अवरोधित नहीं किया जाना चाहिए। Vercel, Netlify, और GitHub पेज सभी SPA में जाने से पहले रूट पर /public सामग्री परोसते हैं। यदि आप एक कस्टम सर्वर पर होस्ट करते हैं, तो पुष्टि करें कि आपकी स्टेटिक फ़ाइल मिडलवेयर index.html परोसने वाले कैच-ऑल रूट से पहले चलती है।
`npm run dev` के साथ विकास के दौरान, Vite अधिकांश परिवर्तनों को स्वचालित रूप से हॉट-रीलोड करता है लेकिन फ़ेविकॉन परिवर्तनों के लिए कभी-कभी मैन्युअल ब्राउज़र हार्ड-रीफ्रेश की आवश्यकता होती है। डेव-सर्वर रीलोड पर भी ब्राउज़र कैश /favicon.ico प्रति मूल। विकास के दौरान रिफ्रेश को बाध्य करने के लिए, या तो हार्ड-रिफ्रेश (Ctrl+Shift+R) करें या अस्थायी रूप से अपने लिंक टैग में `/favicon.svg?v=2` जैसी क्वेरी स्ट्रिंग जोड़ें।
सर्वर-साइड रेंडरिंग सेटअप (उदाहरण के लिए, कस्टम एक्सप्रेस सर्वर के साथ React) में, आपको React SSR हैंडलर से पहले यह पुष्टि करनी होगी कि Express.static() मिडलवेयर /public पर काम करता है। यदि SSR हैंडलर पहले सभी अनुरोधों को पकड़ता है, तो /favicon.ico को React द्वारा प्रस्तुत किया जाएगा और बाइनरी ICO फ़ाइल के बजाय HTML लौटाएगा, जिससे फ़ेविकॉन पूरी तरह से टूट जाएगा।
एकाधिक React ऐप्स वाले मोनोरेपो सेटअप को सावधानीपूर्वक फ़ेविकॉन प्रबंधन की आवश्यकता होती है। प्रत्येक ऐप के /public फ़ोल्डर का अपना फ़ेविकॉन होता है। यदि आप सभी ऐप्स में आइकन साझा करते हैं, तो मोनोरेपो रूट पर एकल स्रोत-ऑफ़-ट्रुथ आइकन निर्देशिका रखने और बिल्ड चरण के दौरान प्रत्येक /public में फ़ाइलों की प्रतिलिपि बनाने पर विचार करें। बिल्ड स्क्रिप्ट में `cp` जैसे उपकरण या एक समर्पित एसेट-सिंक प्लगइन उन्हें सिंक में रखते हैं।
परिनियोजन के बाद, यह सत्यापित करने के लिए favicon tester का उपयोग करें कि सभी फ़ेविकॉन वेरिएंट सार्वजनिक रूप से पहुंच योग्य हैं। अपना उत्पादन URL दर्ज करें और जांचें कि favicon.ico, favicon.svg, apple-touch-icon.png, और आपके मेनिफेस्ट PNG सभी सही ढंग से हल होते हैं। यह गलत तरीके से कॉन्फ़िगर की गई स्थैतिक फ़ाइल सेवा या पथों को नियंत्रित करता है जो विकास में काम करते हैं लेकिन उत्पादन में बाधा डालते हैं।
यह कैसे काम करता है
- 1
अपना फ़ेविकॉन पैकेज जनरेट करें
[favicon generator](tool:favicon-generator) पर 512×512 PNG या SVG अपलोड करें। favicon.ico, favicon.svg, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, और site.webmanifest वाला पैकेज डाउनलोड करें।
- 2
सभी फाइलों को /public पर कॉपी करें
पैकेज से प्रत्येक फ़ाइल को अपने प्रोजेक्ट की /public निर्देशिका में रखें। यह सुनिश्चित करता है कि Vite और CRA उन्हें रूट URL (उदाहरण के लिए, https://yourdomain.com/favicon.ico) पर सेवा प्रदान करें।
- 3
index.html में लिंक टैग अपडेट करें
/public/index.html खोलें (या Vite के लिए प्रोजेक्ट रूट पर index.html)। `<head>` के अंदर निम्नलिखित को बदलें या जोड़ें: .ico लिंक, SVG लिंक, apple-touch-icon लिंक और मेनिफेस्ट लिंक। जनरेट किए गए HTML स्निपेट को फ़ेविकॉन पैकेज README से कॉपी करें।
- 4
मैनिफ़ेस्ट.जेसन आइकन प्रविष्टियाँ अद्यतन करें
सीआरए के लिए, /public/manifest.json खोलें और अपने नए 192×192 और 512×512 PNG को संदर्भित करने के लिए `icons` सरणी को अपडेट करें। Vite के लिए, जेनरेट किए गए site.webmanifest का नाम बदलकर मैनिफ़ेस्ट.json कर दें या मूल फ़ाइल नाम रखें और सुनिश्चित करें कि लिंक टैग उस पर इंगित करता है।
- 5
विकास और उत्पादन में परीक्षण
फ़ेविकॉन कैश को बायपास करने के लिए डेव के दौरान ब्राउज़र को हार्ड-रीफ्रेश करें। परिनियोजन के बाद, सभी आइकन पथ सही ढंग से हल होने की पुष्टि करने के लिए [favicon tester](utility:favicon-tester) का उपयोग करें। iOS पर, apple-touch-icon को सत्यापित करने के लिए 'होम स्क्रीन में जोड़ें' का उपयोग करें।
अभी आज़माएं
एक React-तैयार फ़ेविकॉन बनाएं
फ़ेविकॉन जनरेटरसामान्य प्रश्न
Vite React ऐप में फ़ेविकॉन कहाँ जाता है?+
/public निर्देशिका में: /public/favicon.ico, /public/favicon.svg, /public/apple-touch-icon.png। /public में सब कुछ बिना किसी बिल्ड प्रोसेसिंग के रूट यूआरएल पर परोसा जाता है।
मैं डिफ़ॉल्ट Vite फ़ेविकॉन को कैसे बदलूँ?+
/public/favicon.svg और /public/favicon.ico को अपनी फ़ाइलों से बदलें। यदि hrefs भिन्न हैं तो `<link>` टैग को index.html में भी अपडेट करें। डेव सर्वर को पुनरारंभ करें और परिवर्तन देखने के लिए ब्राउज़र टैब को हार्ड-रीफ्रेश करें।
मैं React में डार्क-मोड फ़ेविकॉन कैसे जोड़ूँ?+
एक एम्बेडेड `@media (prefers-color-scheme: dark)` स्टाइल ब्लॉक के साथ SVG फ़ेविकॉन का उपयोग करें जो आपके आइकन पथों के भरण या स्ट्रोक रंग को बदलता है। इसे index.html में `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>` से लिंक करें। कोई JavaScript की आवश्यकता नहीं है.
मेरा React फ़ेविकॉन ब्राउज़र में अपडेट क्यों नहीं होगा?+
ब्राउज़र कैश /favicon.ico प्रति मूल, यहां तक कि हॉट-मॉड्यूल रीलोड पर भी। टैब को हार्ड-रिफ्रेश करें (Ctrl+Shift+R / Cmd+Shift+R), या नए सिरे से लाने के लिए अपने लिंक टैग में href में अस्थायी रूप से एक संस्करण क्वेरी स्ट्रिंग जोड़ें।
क्या मुझे फ़ेविकॉन परोसने के लिए Vite या वेबपैक को कॉन्फ़िगर करने की आवश्यकता है?+
नहीं, Vite और CRA दोनों स्वचालित रूप से रूट URL पर /public फ़ोल्डर प्रस्तुत करते हैं। फ़ेविकॉन फ़ाइलों के लिए किसी बंडलर कॉन्फ़िगरेशन की आवश्यकता नहीं है जब तक कि उन्हें /public में रखा गया हो।
सीआरए प्रोजेक्ट में मेनिफेस्ट.जेसन क्या है और क्या यह फ़ेविकॉन को प्रभावित करता है?+
यह वेब ऐप मेनिफेस्ट है जो PWA इंस्टॉल प्रॉम्प्ट को सक्षम बनाता है। इसमें /public में PNGs की ओर इशारा करने वाली आइकन प्रविष्टियाँ शामिल हैं। Android होम-स्क्रीन इंस्टॉलेशन के दौरान सही प्रदर्शन के लिए अपने स्वयं के आइकन का उपयोग करने के लिए 192×192 और 512×512 प्रविष्टियों को अपडेट करें।
क्या मैं index.html के बजाय React घटक में फ़ेविकॉन का उपयोग कर सकता हूँ?+
हां, रिएक्ट-हेलमेट या Next.js के अंतर्निहित हेड घटक जैसी लाइब्रेरी का उपयोग कर रहा हूं। Vite React के लिए, लिंक टैग को सीधे index.html में इंजेक्ट करें - यह सबसे सरल और सबसे विश्वसनीय तरीका है क्योंकि फ़ाइल बिल्ड समय पर संसाधित होती है।