1. 16×16 के लिए डिज़ाइन करो, बिलबोर्ड के लिए नहीं
टैब-बार साइज़ पर पतली लाइनें, छोटा टेक्स्ट और व्यस्त ग्रेडिएंट धुँधले हो जाते हैं। एक-दो रंगों वाला बोल्ड सिल्हूट पूरे वर्डमार्क के मिनी वर्शन से कहीं बेहतर स्केल होता है।
स्क्वेयर से शुरू करो। चौड़ा लोगो पहले बीच में स्क्वेयर क्रॉप करो — नहीं तो जनरेटर पूरा कैनवास सिकोड़ देता है और मार्क धब्बा बन जाता है।
वेक्टर SVG या कम से कम 256×256 PNG मास्टर रखो (512×512 और बेहतर)। तुम इस सोर्स से छोटा कर रहे हो, धुँधले थंबनेल से बड़ा नहीं।
2. कई साइज़ वाला ICO एक्सपोर्ट करो (या PNG सेट)
क्लासिक `favicon.ico` एक फ़ाइल में 16×16, 32×32 और 48×48 लेयर बंडल करता है — डेस्कटॉप टैब और बुकमार्क नज़दीकी साइज़ चुन लेते हैं।
फ़ेविकॉन जनरेटर पर PNG, SVG या JPG अपलोड करो, साइज़ बंडल चुनो, और डाउनलोड करो — hex एडिट करने की ज़रूरत नहीं।
कई टीमें 32×32 और 180×180 के अलग PNG भी देते हैं। PWA के लिए वेब ऐप मैनिफ़ेस्ट में साफ़ आइकन एंट्री भी चाहिए।
3. फ़ाइलें रखो और HTML जोड़ो
`favicon.ico` साइट रूट में रखो, या अपने फ़्रेमवर्क का तरीका फॉलो करो — Next.js, Astro आदि इसे `public/` के नीचे ढूँढते हैं।
कम से कम ये टैग: `<link rel="icon" href="/favicon.ico" sizes="any">`। PNG वेरिएंट भी हों तो जैसे `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">` जोड़ो।
iOS «Add to Home Screen» के लिए 180×180 PNG शामिल करो: `<link rel="apple-touch-icon" href="/apple-touch-icon.png">`।
4. डिप्लॉय के बाद चेक करो
हार्ड-रिफ़्रेश करो या इन्कॉग्निटो खोलो — फ़ेविकॉन बहुत कैश होते हैं, सामान्य रीलोड अभी भी कल का आइकन दिखा सकता है।
फ़ोन पर साइट होम स्क्रीन पर जोड़ो और देखो कि apple-touch-icon बिना अजीब पैडिंग के साफ़ दिखे।
रीब्रांड? ICO, PNG और मैनिफ़ेस्ट आइकन एक साथ बदलो। पुराने-नए मिलाए तो यूज़र को एक ही साइट के दो अलग आइकन दिखेंगे।
गलतियाँ जो आधा दिन खा जाती हैं
छोटे साइज़ एम्बेड किए बिना 512 px PNG का नाम `favicon.ico` रखना — कुछ एनवायरनमेंट खराब अपस्केल करते हैं और टैब आइकन धुँधला लगता है।
सिर्फ़ SVG फ़ेविकॉन सपोर्ट बढ़ रहा है, लेकिन कुछ कॉर्पोरेट इन्ट्रानेट पर चुपचाप फेल हो जाता है; ICO प्लस PNG अभी भी भरोसेमंद डिफ़ॉल्ट है।
पूरी तरह ट्रांसपेरेंट आइकन हल्की बैकग्राउंड वाले Windows टैब पर टूटे लग सकते हैं — मार्क के पीछे ठोस ब्रांड-कलर स्क्वेयर अक्सर साफ़ पढ़ता है।
अभी अपना ICO बनाएँ
स्क्वेयर लोगो अपलोड करो, [[favicon-generator|फ़ेविकॉन जनरेटर]] से मल्टी-साइज़ फ़ेविकॉन डाउनलोड करो, फिर सेक्शन 3 के HTML टैग चिपकाओ।
फ़ेविकॉन जनरेटर खोलें