फ़ेविकॉन पर टिप्पणियाँ

मार्गदर्शिका · 3 मिनट पढ़ें

आपका फ़ेविकॉन अपडेट क्यों नहीं होता और इसे कैसे बाध्य करें

आपने फ़ेविकॉन बदला, तैनात किया, रीलोड किया... और पुराना अब भी वहीं है। यह सभी में सबसे आम फ़ेविकॉन शिकायत है, और यह लगभग कभी कोड की समस्या नहीं होती। ब्राउज़र फ़ेविकॉन को पेज या छवियों से कहीं अधिक आक्रामक तरीके से कैश करते हैं, और फ़ेविकॉन कैश आमतौर पर एक सामान्य रीलोड से बच जाता है।

इसे इस क्रम में हल करें:

• हार्ड रीलोड। Ctrl+Shift+R (Windows) या Cmd+Shift+R (Mac) पेज कैश को छोड़कर रीलोड करता है।
• टैब दोबारा खोलें। फ़ेविकॉन कैश आमतौर पर खुली टैब से जुड़ा होता है। इसे पूरी तरह बंद करके नया खोलें।
• एक पैरामीटर से इसे तोड़ें। परीक्षण करते समय link को एक «नए» URL की ओर इंगित करें: <link rel="icon" href="/favicon.ico?v=2">। हर बदलाव पर संख्या बढ़ाएँ।
• पुष्टि करें कि फ़ाइल वाकई वहाँ है। yourdomain.com/favicon.ico को सीधे लोड करें; अगर यह 404 देता है, तो ब्राउज़र उस फ़ाइल का कैश किया हुआ आइकन दिखा रहा है जो अब मौजूद नहीं है।

Google Search एक अलग मामला है। यह आपके फ़ेविकॉन को आपके पेजों से स्वतंत्र रूप से कैश करता है और Google के कैलेंडर के अनुसार अपडेट होता है, इसलिए खोज परिणामों में एक नया आइकन दिनों या हफ़्तों तक विलंबित हो सकता है, भले ही आपकी साइट पहले से सही हो। इसे तेज़ करने के लिए कोई बटन नहीं है: सुनिश्चित करें कि /favicon.ico Googlebot को 200 लौटाता है और प्रतीक्षा करें।

राय · 4 मिनट पढ़ें

20 फ़ेविकॉन फ़ाइलें बनाना बंद करें: 2026 का न्यूनतम सेट

कई फ़ेविकॉन उपकरण अब भी आपको सोलह PNG, एक browserconfig.xml और Microsoft की टाइल छवियों वाला एक ZIP देते हैं। लगभग सब कुछ मृत भार है। Windows टाइलें Live Tiles इंटरफ़ेस के साथ रिटायर हो गईं; मध्यवर्ती PNG आकारों का ढेर एक ब्राउज़र समस्या हल करता था जो अब मौजूद नहीं है।

यह वह सेट है जो आज उपयोग की जाने वाली हर चीज़ को कवर करता है:

• favicon.ico: मल्टी-साइज़ (16/32/48), पुराने ब्राउज़र और Google Search के लिए।
• icon.svg: एक स्केलेबल फ़ाइल जिसे आधुनिक ब्राउज़र पसंद करते हैं, डार्क मोड में सक्षम।
• apple-touch-icon.png: iOS की होम स्क्रीन के लिए 180×180।
• PNG android-chrome-192 और -512: Android और PWA के लिए आपके वेब ऐप मैनिफ़ेस्ट से संदर्भित।

पाँच फ़ाइलें, चार <link>/मैनिफ़ेस्ट संदर्भ, हो गया। कम फ़ाइलों का मतलब है सिंक में रखने के लिए कम चीज़ें, एक हल्की तैनाती और कोई पुराना browserconfig.xml नहीं जो आपके द्वारा हटाई गई छवियों की ओर इशारा करे। अगर कोई उपकरण ज़ोर देता है कि आपको बीस चाहिए, तो वह सूक्ष्म दिखने के लिए अनुकूलन कर रहा है, न कि उसके लिए जो ब्राउज़र माँगते हैं।

तकनीक · 3 मिनट पढ़ें

SVG फ़ेविकॉन और डार्क मोड: एक आइकन जो ढल जाता है

एक गहरा लोगो हल्की टैब बार पर तीक्ष्ण दिखता है और गहरी पर लगभग गायब हो जाता है। दो फ़ाइलें प्रकाशित करना और उन्हें अदल-बदल करना झंझट भरा है। एक SVG फ़ेविकॉन के साथ आप एक ही फ़ाइल को ब्राउज़र की थीम पर प्रतिक्रिया देने दे सकते हैं, क्योंकि ब्राउज़र आइकन रेंडर करते समय SVG के अंदर के CSS को लागू करता है।

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .glyph { fill: #111; }
    @media (prefers-color-scheme: dark) { .glyph { fill: #fff; } }
  </style>
  <path class="glyph" d="…"/>
</svg>

इसे <link rel="icon" href="/icon.svg" type="image/svg+xml"> से संदर्भित करें और एक सरल favicon.ico को विकल्प के रूप में रखें: पुराने ब्राउज़र और Google Search मीडिया क्वेरी का मूल्यांकन नहीं करेंगे, इसलिए उन्हें भी एक स्थिर आइकन चाहिए। परिणाम: एक हल्के सिस्टम पर ग्लिफ़ गहरा होता है, एक गहरे पर यह हल्के में बदल जाता है, सब कुछ एक छोटी फ़ाइल से।