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

वह न्यूनतम सेट जो वाकई काम करता है

आपको सोलह PNG या browserconfig.xml की ज़रूरत नहीं है। Windows टाइलें और Internet Explorer के पुराने प्रारूप मर चुके हैं। चार संसाधन आज उपयोग किए जाने वाले सभी ब्राउज़र और डिवाइस कवर करते हैं:

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

<head> में चिपकाने के लिए HTML

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

ब्राउज़र चारों पंक्तियाँ पढ़ता है और अपने समर्थित सर्वोत्तम प्रारूप को चुनता है, इसलिए मौजूदा Chrome या Safari SVG का उपयोग करता है जबकि पुराना ब्राउज़र .ico पर लौटता है। .ico पंक्ति में sizes="48x48" बस उसमें मौजूद सबसे बड़ी छवि की घोषणा करता है।

वेब ऐप मैनिफ़ेस्ट

मैनिफ़ेस्ट वही है जो Android और PWA इंस्टॉल को उपयुक्त आइकन उपयोग करने देता है। एक न्यूनतम site.webmanifest:

{
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
  ]
}

"purpose": "any maskable" Android को आपके लोगो को काटे बिना अपने अनुकूली आकार के अनुसार आइकन क्रॉप करने देता है, बशर्ते आप उसके चारों ओर एक सुरक्षा मार्जिन छोड़ें (देखें उन्नत सुझाव)।

फ़ाइलें कहाँ रखें

सभी फ़ाइलें अपनी साइट की रूट डायरेक्टरी में रखें। ब्राउज़र — और Googlebot — /favicon.ico को रूट से स्वतः माँगते हैं, <link> टैग के बिना भी, इसलिए उसे वहाँ रखना सबसे सुरक्षित डिफ़ॉल्ट विकल्प है।

पुष्टि करें कि यह वाकई काम कर गया

पेज का हार्ड रीलोड: Ctrl+Shift+R (Windows) या Cmd+Shift+R (Mac)।
अभी भी अटके हैं? साइट को निजी या गुप्त विंडो में खोलें: यह खाली कैश से शुरू होती है।
हर फ़ाइल को सीधे लोड करें, उदा. yourdomain.com/favicon.ico, और पुष्टि करें कि यह छवि लौटाती है (HTTP 200), न कि 404।
DevTools में रेंडर किए गए <head> का निरीक्षण करें, सिर्फ़ अपनी स्रोत फ़ाइल का नहीं: कोई बिल्ड चरण या CMS पथों को फिर से लिख सकता है।

जो सबसे ज़्यादा समय बर्बाद करता है: कैश

ब्राउज़र फ़ेविकॉन को लगभग किसी भी अन्य संसाधन से ज़्यादा हठ से कैश करते हैं, और कभी-कभी सामान्य रीलोड के बावजूद पुराना बनाए रखते हैं। अगर कोई नया आइकन दिखने से इनकार करता है:

हार्ड रीलोड करें, फिर टैब को पूरी तरह बंद करें और नया खोलें: फ़ेविकॉन कैश आमतौर पर टैब से जुड़ा होता है।
परीक्षण करते समय, एक संस्करण पैरामीटर जोड़ें ताकि ब्राउज़र इसे नई फ़ाइल माने: <link rel="icon" href="/favicon.ico?v=2">।
Google Search अपनी खुद की प्रति रखता है और अपने कैलेंडर के अनुसार इसे अपडेट करता है: नए आइकन के खोज परिणाम में दिखने से पहले दिनों, कभी-कभी हफ़्तों का हिसाब रखें।

इस साइट पर सब कुछ आपके ब्राउज़र में चलता है। आप जो छवि अपलोड करते हैं वह कभी आपके डिवाइस से बाहर नहीं जाती: उसे भेजने के लिए कोई सर्वर है ही नहीं।

← जनरेटर पर वापस जाएँ