Vue Favicon दिख नहीं रहा? यहाँ है इसका फ़िक्स
एक Vue single-file component head में link tag रेंडर नहीं कर सकता, इसलिए favicon index.html में घोषित होता है: Vite में project root पर, Vue CLI में public/ के अंदर। खाली tab का मतलब है उस फ़ाइल का tag गलत है।
यह component क्यों नहीं है
Browser favicon को तब माँगता है जब वह head पार्स कर रहा होता है, Vue के कुछ भी mount करने से पहले। app के अंदर से आप जो कुछ जोड़ते हैं वह बहुत देर से पहुँचता है, इसीलिए icon static HTML में रहता है।
वह HTML कहाँ रहता है यह scaffold पर निर्भर है। create-vue (Vite) index.html को project root पर रखता है और public/ को output में ज्यों-का-त्यों कॉपी करता है। Vue CLI template को public/index.html पर रखता है और उसे EJS से चलाता है, इसलिए URLs को एक placeholder चाहिए।
गड़बड़ी ढूँढें
- 1
/favicon.ico सीधे खोलें
404 का मतलब है फ़ाइल उस path पर सर्व नहीं हो रही। अगर लोड हो जाए तो फ़ाइल ठीक है और link tag या कोई cache समस्या है।
- 2
पक्का करें कि आप किस scaffold पर हैं
Root index.html का मतलब Vite: /favicon.ico इस्तेमाल करें। public/index.html template का मतलब Vue CLI: <%= BASE_URL %> prefix इस्तेमाल करें।
- 3
icon को src से import न करें
import की गई image bundle होकर hash हो जाती है, इसलिए /favicon.ico resolve होना बंद कर देता है। icon को public/ में उनके नाम बरकरार रखते हुए रखें।
Vue favicon न दिखने पर: FAQ
मेरा Vue favicon क्यों नहीं दिख रहा?
index.html का link tag वहाँ इशारा करता है जहाँ फ़ाइल नहीं है, या (Vue CLI पर) BASE_URL placeholder गायब है इसलिए path domain root से हटकर टूट जाता है। /favicon.ico सीधे खोलें और देखें कि फ़ाइल सर्व भी हो रही है या नहीं।
क्या मैं किसी Vue component से favicon सेट कर सकता हूँ?
आप useHead से इसे runtime पर बदल सकते हैं, और browser load के बाद उस बदलाव को अपनाता है। लेकिन पहला request index.html में जो घोषित है उसी का इस्तेमाल करता है, इसलिए वहाँ एक असली default ज़रूर रखें।
इसे import करने के बाद favicon गायब क्यों हो गया?
src से किसी image को import करना उसे bundler को सौंप देता है, जो एक hash किया गया नाम emit करता है। फिर /favicon.ico पर कुछ नहीं मिलता। इसके बजाय फ़ाइल को public/ में रखें।