Favicon कैसे बनाएँ – हर size और HTML code (2026)

नमस्ते दोस्तों! 🙏 स्वागत है The Easy Master पर!

Favicon वो छोटा icon है जो browser tab में, bookmark में और phone की home screen पर दिखता है. न हो तो tab में एक सपाट सफ़ेद चौकोर रह जाता है – और बीस tabs खुले हों तो आपकी site सबसे अलग नहीं, सबसे अनजान दिखती है.

बनाना आसान है. अटकते लोग एक ही जगह हैं – कौन सी files चाहिए और उन्हें जोड़ने वाला HTML क्या है. वही यहाँ पूरा मिलेगा.

तीन क़दम

1. Favicon Generator में अपना logo drag कीजिए
2. Download all as a .zip दबाइए
3. Zip खोलकर सारी files site की जड़ में रखिए, और दिया हुआ HTML <head> में चिपका दीजिए

कौन सी files, और क्यों

• favicon.ico – पुराने browsers बिना पूछे site की जड़ में यही ढूँढते हैं. इसमें 16, 32 और 48 तीनों एक ही file में होते हैं
• favicon-16x16.png और favicon-32x32.png – आज के browsers इन्हें पसंद करते हैं. 32 वाला sharp screens के लिए है
• apple-touch-icon.png (180px) – कोई iPhone पर “Add to Home Screen” करे तो यही दिखता है. न हो तो iOS आपके page का धुँधला screenshot लगा देता है
• android-chrome-192.png और 512.png – Android की home screen और splash screen
• site.webmanifest – Android इसी से app का नाम और रंग उठाता है

HTML जो <head> में जाता है

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Tool यही HTML आपके लिए तैयार रखता है, copy button के साथ. WordPress में हैं तो ये theme की header.php में </head> से ठीक पहले जाएगा, या wp_head hook से.

अच्छा favicon कैसा होता है

• कम से कम 512px चौकोर दीजिए. इससे छोटी तस्वीर को बड़ा करने से detail नहीं बनती – icon धुँधला आएगा. Tool ऐसे में पहले ही बता देता है, files बनाने के बाद नहीं
• पूरा logo मत डालिए. 16 pixel में नाम नहीं पढ़ा जाता. सिर्फ़ निशान या पहला अक्षर रखिए – बड़े brands भी यही करते हैं
• Transparent background dark mode में बेहतर बैठता है. ठोस रंग चाहिए तो tool में चुन लीजिए

बदलने के बाद दिख नहीं रहा?

Favicon को browser सबसे ज़्यादा देर तक cache में रखता है – यही सबसे आम शिकायत है. Hard refresh कीजिए, या yoursite.com/favicon.ico सीधे खोलकर देखिए: वहाँ नया icon दिख रहा है तो file सही जगह है, बस आपका browser पुराना याद रखे बैठा है.

क्या logo upload होता है?

नहीं. सारी files – .ico और .zip समेत – आपके browser में बनती हैं. कोई server नहीं, कोई limit नहीं. ये तब मायने रखता है जब brand अभी launch भी न हुआ हो.

👉 अपना favicon यहाँ बनाइए – हर size और HTML के साथ, free.