Next.js Favicon दिख नहीं रहा? यहाँ है इसका फ़िक्स
App Router में Next.js icon link आपकी app directory की फ़ाइलों से बनाता है। फ़ाइल का नाम चूके तो यह कुछ भी नहीं बनाता। Pages Router में तो कोई convention ही नहीं है। पहचान लें कि आप किस स्थिति में हैं, फिर फ़िक्स साफ़ हो जाता है।
आप किस router पर हैं?
App Router आपकी app directory से favicon.ico, icon और apple-icon नाम वाली फ़ाइलें पढ़ता है, उनका size निकालता है, और build time पर link tag इंजेक्ट कर देता है। अगर फ़ाइल का नाम गलत हो या वह गलत folder में हो, तो कोई tag नहीं बनता। कोई error नहीं आता, बस एक खाली tab रह जाता है।
Pages Router में ऐसा कोई convention नहीं है। जब तक आप फ़ाइलें public में न रखें और link tag खुद एक custom head में न लिखें, तब तक कुछ नहीं दिखता। दो के बीच आधा-अधूरा माइग्रेट किया गया project ही वह सबसे आम वजह है जिससे favicon एक route पर काम करता है और दूसरे पर नहीं।
फ़ाइल कहाँ होनी चाहिए
| फ़ाइल | Router | Next.js क्या करता है |
|---|---|---|
| app/favicon.ico | App Router | /favicon.ico पर सर्व होती है, tag अपने-आप इंजेक्ट होता है |
| app/icon.png | App Router | build पर अपने-आप sized और linked हो जाती है |
| public/favicon.ico | Pages Router | तभी दिखती है जब आप link tag खुद जोड़ें |
तीस सेकंड में पक्का करें
- 1
icon URL सीधे खोलें
एक नए tab में /favicon.ico (या /icon) लोड करें। 404 का मतलब है फ़ाइल वहाँ नहीं है जहाँ Next उसे ढूँढता है: यह build की समस्या है, cache की नहीं।
- 2
source देखें और rel="icon" खोजें
head में कोई icon link न होना बताता है कि file convention चला ही नहीं। जाँचें कि फ़ाइल का नाम बिलकुल मिलता है: favicon.ico, icon.png, apple-icon.png।
- 3
cache को सबसे आख़िर में जाँचें
जब फ़ाइल resolve हो जाए और tag मौजूद हो, तभी private window में hard-refresh करें। दस में से नौ बार समस्या cache से पहले ही कहीं थी।
Next.js favicon न दिखने पर: FAQ
मेरा Next.js favicon क्यों नहीं दिख रहा?
App Router में इसलिए कि फ़ाइल का नाम गलत है या वह app directory में नहीं है, इसलिए कोई link tag नहीं बनता। Pages Router में इसलिए कि कोई अपने-आप चलने वाला convention नहीं है और आपने custom head में tag नहीं जोड़े। /favicon.ico सीधे खोलें। 404 पक्का कर देता है कि यह फ़ाइल या placement की समस्या है।
अगर मेरे पास app/icon.png है तो क्या favicon.ico चाहिए?
दोनों रखें। icon.png आधुनिक browsers को बेहतर quality में कवर करता है; favicon.ico वही है जिसे पुराने browsers, feed reader और कुछ link-preview crawler आज भी path से माँगते हैं।
favicon एक page पर दिखता है और दूसरे पर क्यों नहीं?
आमतौर पर App Router और Pages Router को मिलाने वाला project। app directory का convention केवल उन्हीं routes को कवर करता है जो उससे रेंडर होते हैं; Pages Router के routes को _document या custom head में अपने link tag चाहिए।