React Favicon दिख नहीं रहा? यहाँ है इसका फ़िक्स
React एक DOM node में रेंडर करता है और head को कभी नहीं छूता, इसलिए favicon एक static HTML फ़ाइल में रहता है। खाली tab का मतलब है उस फ़ाइल का link tag गलत है, या icon src से import हुआ था और अब किसी तय path पर नहीं रहा।
head एक static फ़ाइल है, कोई component नहीं
Browser favicon को तब माँगता है जब वह head पार्स कर रहा होता है, React के mount होने से बहुत पहले। इसलिए icon link को HTML shell में होना चाहिए: Vite में project root पर index.html, और Create React App में public/index.html।
दो चीज़ें इसे तोड़ती हैं। Create React App में ऐसा href जो %PUBLIC_URL% placeholder को छोड़ देता है, locally तो काम करता है और फिर domain root से हटते ही 404 दे देता है। किसी भी React project में icon को src से import करना उसे bundler को सौंप देता है, जो उसका नाम एक content hash के साथ बदल देता है, इसलिए /favicon.ico पर फिर कुछ नहीं मिलता।
इसे ढूँढ निकालें
- 1
/favicon.ico सीधे खोलें
404 का मतलब है फ़ाइल उस path पर सर्व नहीं हो रही: यह build या path की समस्या है। अगर लोड हो जाए तो फ़ाइल ठीक है और link tag या cache ही समस्या है।
- 2
build की गई index.html पढ़ें
अपने source में नहीं, build output में देखें। पक्का करें कि icon href किसी असली path पर resolve हुआ, और CRA के लिए कि %PUBLIC_URL% अक्षरशः छोड़ा नहीं गया बल्कि प्रतिस्थापित हुआ।
- 3
icon को src से import करना बंद करें
public/ की फ़ाइलें अपने नाम बनाए रखती हैं और तय path पर मिलती हैं; src/ से imports hash हो जाते हैं। favicon को public/ में ही होना चाहिए।
React favicon न दिखने पर: FAQ
मेरा React favicon क्यों नहीं दिख रहा?
लगभग हमेशा index.html का link tag वहाँ इशारा करता है जहाँ फ़ाइल नहीं है, या icon src से import होकर hash किए गए नाम वाला बन गया। /favicon.ico सीधे खोलें और देखें कि फ़ाइल उस path पर सर्व भी हो रही है या नहीं।
sub-path पर deploy करने के बाद मेरा favicon 404 क्यों देने लगा?
href आपकी subdirectory के बजाय domain root के सापेक्ष resolve हुआ। Vite में vite.config.js में base सेट करें; Create React App में homepage field सेट करें और template में %PUBLIC_URL% इस्तेमाल करें, फिर build की गई index.html जाँचें।
क्या मुझे अपने React code में favicon import करना है?
नहीं। public/ की फ़ाइलें build output में जैसी हैं वैसी ही कॉपी होती हैं और module graph का हिस्सा नहीं होतीं। किसी एक को import करने से दूसरी, hash की गई कॉपी बनती है और तय /favicon.ico path टूट जाता है।