Vite Favicon दिख नहीं रहा या 404? यहाँ है इसका फ़िक्स
Vite public/ को output root में कॉपी करता है और build time पर index.html फिर से लिखता है। जो favicon dev में काम करता है और production में 404 देता है, उसके path में लगभग हमेशा public/ का हिस्सा होता है, या वह src से import होकर hash हो चुका होता है।
दो asset pipeline, जिनमें से एक ही आपको चाहिए
जो कुछ भी src से import होता है वह module graph का हिस्सा है: Vite उसे inline कर देता है या एक content hash के साथ emit करता है और reference फिर से लिख देता है। यह UI images के लिए सही है और favicon के लिए गलत, जिसे किसी तय URL पर मिलना ही होता है।
public/ इससे बचने का रास्ता है। वहाँ की फ़ाइलें कभी resolve, hash या inline नहीं होतीं। वे output के root में अपने नाम बरकरार रखते हुए कॉपी हो जाती हैं। इसलिए public/favicon.ico /favicon.ico पर सर्व होती है, और href ठीक वही होना चाहिए।
सही link tag
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />Root-absolute paths, बिना public/ हिस्से के। ये project root की index.html में रहते हैं, public/ के अंदर नहीं।
Vite favicon न दिखने पर: FAQ
मेरा Vite favicon केवल production build में ही 404 क्यों देता है?
क्योंकि path public/ से या किसी import से होकर गुज़रा, और ये दोनों dev और build के बीच बदल जाते हैं। build की गई index.html और output directory खोलें और पक्का करें कि href और फ़ाइल आपस में मेल खाते हैं।
क्या मुझे favicon कहीं import करना है?
नहीं। public/ की फ़ाइलें जान-बूझकर module graph से बाहर हैं। किसी एक को import करने पर Vite एक दूसरी hash की गई कॉपी emit करता है, और जहाँ आप एक चाहते थे वहाँ दो फ़ाइलें रह जाती हैं और /favicon.ico पर कुछ नहीं।
sub-path के तहत deploy करने पर favicon 404 देता है।
vite.config.ts में base सेट करें। Vite build time पर index.html में asset URLs फिर से लिखता है, इसलिए भेजने से पहले build की गई फ़ाइल खोलें और पक्का करें कि icon href में prefix मौजूद है।