Favicon नहीं दिख रहा या update नहीं हो रहा? 9 कारण और समाधान
नौ कारण जो favicons को तोड़ते हैं, और हर एक का सटीक समाधान। दस में से नौ बार यह caching होता है, तो वहीं से शुरू करें और table में नीचे की ओर बढ़ें।
<link rel="icon" href="/favicon.ico?v=2" sizes="any">URL बदलना ही वह चीज़ है जो browser को नई file fetch करवाती है। ICO को जगह पर ही edit करना काफ़ी नहीं है।
कारण और समाधान
| कारण | यह क्यों टूटता है | समाधान |
|---|---|---|
| 1. Browser या CDN caching | Browsers favicons को लगभग किसी भी अन्य asset से ज़्यादा आक्रामक तरीके से cache करते हैं, और आगे लगा एक CDN एक दूसरी परत जोड़ देता है। | Hard-refresh करें (Cmd+Shift+R / Ctrl+F5) और एक version query string जोड़ें ताकि URL खुद बदल जाए। |
| 2. गलत file path | एक relative path current page के सापेक्ष resolve होता है, root के नहीं। | आगे एक slash लगाएँ, /favicon.ico, और पुष्टि करें कि file उस URL पर एक नए tab में सचमुच load होती है। |
| 3. गायब या ख़राब link tags | कोई icon link न होना, rel="icon" में एक typo, या <head> के बाहर रखे tags — ये सब browser को file ढूँढने से रोकते हैं। | अपने shared layout में markup को validate करें। |
| 4. गलत format या size | बहुत छोटा favicon, गलत MIME type, या एक corrupt .ico चुपचाप render होने में असफल हो सकता है। | एक supported size और format में फिर से export करें, और उसे सही content type के साथ परोसें। ICO vs PNG की तुलना करें और ज़रूरी favicon sizes जाँचें। |
| 5. Apple touch icon update नहीं हो रहा | iOS favicon.ico को नज़रअंदाज़ करता है और apple-touch-icon इस्तेमाल करता है। अगर वह गायब या पुराना है, तो home screen गलत चीज़ दिखाती है। | apple-touch-icon link ठीक करें, फिर page को home screen से हटाकर दोबारा जोड़ें। |
| 6. Manifest icon की समस्याएँ | Android और installed PWAs पर icon manifest.json से आता है। वहाँ एक ख़राब path या गलत size home-screen और splash icons को तोड़ देता है। | manifest.json में icon paths और sizes ठीक करें, फिर app को दोबारा install करें। |
| 7. Build output आपके tags हटा देता है | कुछ frameworks document head को फिर से लिखते हैं, इसलिए हाथ से लिखे link tags build में नहीं बचते। | अपनी stack का guide follow करें: Next.js, React, WordPress, या Shopify। |
| 8. एक theme या CMS अपना ही icon inject करता है | एक theme अपना खुद का site icon सेट कर सकता है, जो markup में जोड़े गए आपके icon को override कर देता है। | Icon को template के बजाय platform की अपनी site-icon setting के ज़रिए सेट करें। |
| 9. एक build cache पुरानी file परोसता है | Build या platform cache redeploy के बाद भी पुराना icon परोसता रहता है। | Build/platform cache purge करें, redeploy करें, और फिर से जाँचें। |
आगे कहाँ देखें
Format या size पर शक है? glossary में ICO vs PNG की तुलना करें और ज़रूरी favicon sizes जाँचें। iOS की परेशानी? apple-touch-icon वाला entry पढ़ें। Manifest की परेशानी? what is manifest.json पढ़ें।
कारण 7 से 9 platform-specific वाले हैं: कुछ frameworks और CMSs favicon को इस तरह से overwrite या cache करते हैं जो plain HTML नहीं करता। Build output आपके tags हटा सकता है, एक theme अपना icon inject कर सकता है, या एक build cache पुरानी file परोस सकता है। Next.js, React, WordPress, और Shopify के guides हर एक इसका अपना संस्करण cover करते हैं।
Cache में पड़े favicon को कैसे साफ़ करें
- 1
एक version query string जोड़ें
link के href को /favicon.ico?v=2 में बदलें ताकि browser एक ताज़ा file fetch करे।
- 2
Page को hard-refresh करें
Cache को bypass करने के लिए Cmd+Shift+R (macOS) या Ctrl+F5 (Windows) इस्तेमाल करें।
- 3
किसी भी CDN cache को purge करें
अगर आपके site के आगे एक CDN है, तो favicon path को invalidate करें ताकि edge nodes नई file परोसें।
Cache साफ़ कर दिया और फिर भी वही है?
| आप क्या देखते हैं | इसका आमतौर पर क्या मतलब है | अगला कदम |
|---|---|---|
| 404: favicon नहीं मिला | Browser ने /favicon.ico माँगा और server के पास वहाँ कुछ नहीं था। किसी framework build के ठीक बाद आम है जिसने file को output में कभी copy ही नहीं किया। | /favicon.ico को सीधे खोलें। अगर 404 आता है, तो file deploy नहीं हुई है। यह एक build या path की समस्या है, cache की नहीं, इसलिए cache ठीक करने से कभी मदद नहीं मिलेगी। |
| पुराना icon अब भी direct URL पर load होता है | /favicon.ico खोलने पर पुरानी image दिखती है, यानी file खुद पुरानी है। कितना भी hard-refresh उसे नहीं हिलाएगा। | एक build step या CDN पुरानी file दे रहा है। Platform/CDN cache purge करें, redeploy करें, फिर tab जाँचने से पहले direct URL दोबारा खोलें। |
| URL पर सही file, tab में गलत icon | Direct URL सही है पर tab अब भी गलत है। एक दूसरा link tag (किसी theme का, plugin का, या framework default) आपके tag से आगे निकल रहा है। | Source देखें और rel="icon" tags गिनें। Browser आख़िरी वाला लेता है जिसे वह समझता है, इसलिए तीसरा जोड़ने के बजाय हारने वाले को हटाएँ। |
| एक browser में ठीक, दूसरे में गायब | हर browser, और हर Chrome profile, अपना खुद का favicon store रखता है, और कुछ एक पुरानी entry को दिनों तक थामे रहते हैं। | Site को दोषी मानने से पहले एक ताज़ा private window या साफ़ profile में पुष्टि करें। |
उस table को ऊपर से नीचे तक पार करें। हर पंक्ति एक परत को खारिज करती है, ताकि आप cache के बारे में अनुमान लगाना बंद करें और पढ़ना शुरू करें कि server सचमुच क्या लौटाता है।
जिन sizes की परवाह असफल मामले करते हैं
एक scan से समाधान की पुष्टि करें
अनुमान लगाना धीमा है। एक automated scan चलाएँ जो आपके live site को fetch करता है, हर favicon tag की सूची बनाता है जो उसे मिलता है, और गायब या टूटे हुए tags को चिह्नित करता है, ताकि आपको पता चले कि समाधान सचमुच लागू हुआ।
Browsers और devices में हाथ से भी test करना चाहते हैं? देखें how to test & check your favicon।
अक्सर पूछे जाने वाले प्रश्न
मेरा favicon क्यों नहीं दिख रहा?
सबसे आम कारण हैं आक्रामक browser caching, एक गलत या relative file path, और <head> में गायब या ख़राब <link> tags। Hard-refresh करें, पुष्टि करें कि /favicon.ico सीधे resolve होता है, और अपने tags जाँचें।
मैं अपने favicon को update होने के लिए कैसे मजबूर करूँ?
Icon URL में एक version query string जोड़ें, जैसे /favicon.ico?v=2। इससे browser इसे एक नई file की तरह मानता है। फिर hard-refresh करें या site का cache साफ़ करें।
मेरा favicon desktop पर दिखता है पर iPhone पर नहीं, ऐसा क्यों?
iOS apple-touch-icon इस्तेमाल करता है, favicon.ico नहीं। अगर वह 180×180 PNG link गायब है, तो iOS एक screenshot पर वापस चला जाता है। एक apple-touch-icon link जोड़ें और page को home screen में दोबारा जोड़ें।
Google search में favicon update होने में कितना समय लगता है?
Google favicons को तब refresh करता है जब वह आपके site को दोबारा crawl करता है, जिसमें दिनों से हफ़्तों तक लग सकते हैं। सुनिश्चित करें कि icon कम से कम 48×48 हो, एक valid rel=icon tag के साथ referenced हो, और Googlebot के लिए पहुँच योग्य हो।
favicon not found क्यों कहता है, या 404 क्यों लौटाता है?
Browser ने icon को path से माँगा और server के पास वहाँ कुछ नहीं था। /favicon.ico को एक नए tab में सीधे खोलें: अगर 404 आता है, तो file उस URL पर कभी deploy ही नहीं हुई, आमतौर पर एक framework build जिसने इसे output में copy नहीं किया, या link tag में एक गलत path। ठीक करें कि file कहाँ आती है, cache को नहीं।
मेरा favicon गायब है: file असल में कहाँ होनी चाहिए?
क्लासिक tab icon के लिए, site root पर एक असली file ताकि /favicon.ico resolve हो। Frameworks बदल देते हैं कि यह वहाँ कैसे पहुँचता है: Next.js app/favicon.ico पढ़ता है, Vite और ज़्यादातर SPAs public/ को root में copy करते हैं, और WordPress या Shopify इसे एक file के बजाय एक site-icon setting के ज़रिए परोसते हैं। अगर tag कहीं ऐसी जगह इंगित करता है जहाँ build ने कभी file नहीं लिखी, तो icon 'गायब' है भले ही आपका source सही दिखे।
मैंने cache साफ़ करने की कोशिश की और फिर भी वही है। अब क्या?
Caches साफ़ करना बंद करें और पढ़ें कि server क्या लौटाता है। /favicon.ico को सीधे खोलें: एक 404 का मतलब build या path की समस्या है, एक पुरानी image का मतलब एक पुराना build या CDN file है, और सही file के साथ tab में गलत icon का मतलब है कि एक दूसरा link tag जीत रहा है। हर नतीजा एक अलग समाधान की ओर इंगित करता है। ऊपर दी escalation table देखें।