HTML Favicon

अब हम एक छोटा लेकिन बहुत ही प्रोफेशनल टॉपिक सीखने जा रहे हैं — जो किसी भी वेबसाइट की पहचान बनाता है।

Favicon क्या होता है?

Favicon (favorite icon) एक छोटा सा आइकन होता है जो आपके ब्राउज़र टैब, बुकमार्क, या सर्च रिज़ल्ट में आपकी वेबसाइट का प्रतिनिधित्व करता है। इसे आप वेबसाइट की Profile Photo भी कह सकते हैं!

Favicon कहाँ दिखाई देता है?

जब आप कोई वेबसाइट खोलते हैं, तो उसके नाम के बगल में जो छोटा आइकन दिखाई देता है — वही Favicon होता है। यह जगहों पर दिखता है:

Browser tab में
Bookmarks में
Search results में
Mobile shortcuts (Add to Home Screen) में

HTML में Favicon जोड़ने का तरीका

HTML में favicon को <head> सेक्शन के अंदर <link> टैग से जोड़ा जाता है।

<link rel="icon" type="image/x-icon" href="favicon.ico">

यह कोड बताता है कि:

rel="icon" — यह एक favicon है
type="image/x-icon" — फाइल का फॉर्मेट .ico है
href="favicon.ico" — फाइल का पाथ

Example 1: Basic Favicon जोड़ना

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <h1>Welcome to My Website!</h1>
</body>
</html>

Folder Structure:

project/
 ├── index.html
 └── favicon.ico=

Output: ब्राउज़र टैब में छोटा favicon दिखाई देगा।

Example 2: PNG Format Favicon

अब ज़रूरी नहीं कि favicon सिर्फ .ico फाइल हो। आप .png, .jpg, या .svg फॉर्मेट भी इस्तेमाल कर सकते हैं।

<link rel="icon" type="image/png" href="favicon.png">

PNG Format अब सबसे आम है, क्योंकि यह transparent और high quality होता है।

Example 3: अलग-अलग Device के लिए Favicons

मोबाइल, टैबलेट और PC पर favicon के अलग साइज इस्तेमाल किए जाते हैं। आप चाहें तो एक साथ कई साइज specify कर सकते हैं।

<link rel="icon" sizes="32x32" href="favicon-32x32.png" type="image/png">
<link rel="icon" sizes="16x16" href="favicon-16x16.png" type="image/png">

इससे हर डिवाइस अपने हिसाब से सही favicon ले लेता है।

Example 4: Apple और Android के लिए Favicon

अगर आपकी वेबसाइट को लोग मोबाइल पर “Add to Home Screen” करते हैं, तो आप Apple Touch Icon या Android Icon भी जोड़ सकते हैं।

<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="manifest" href="site.webmanifest">

Output: अब मोबाइल होम स्क्रीन पर वेबसाइट का कस्टम आइकन दिखेगा।

Favicon File Formats

Format (फ़ॉर्मेट)	Description (विवरण)
.ico	Traditional Windows favicon (सबसे पुराना format)।
.png	Modern & High Quality (recommended ✅)। यह पारदर्शिता (transparency) को सपोर्ट करता है।
.jpg	भी चलेगा, लेकिन इसमें पारदर्शिता (transparency नहीं होती)। यह आमतौर पर कम अनुशंसित है।
.svg	Vector Icon — Infinite Quality (modern browsers only)। यह आकार बदलने पर भी स्पष्ट रहता है।

Favicon Design Tips

Simple Design रखें — बहुत छोटा दिखता है (16×16 px), इसलिए ज्यादा detail मत रखें।
Square Shape (1:1) में बनाएं।
High Contrast Colors इस्तेमाल करें ताकि आइकन साफ दिखे।
.ico और .png दोनों versions रखना अच्छा रहता है।
Free favicon बनाने के लिए साइट्स जैसे favicon.io
या realfavicongenerator.net
का उपयोग करें।

Example 5: Favicon को एक HTML Template में जोड़ना

<!DOCTYPE html>
<html lang="hi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Favicon Example</title>
  <link rel="icon" type="image/png" href="favicon.png">
</head>
<body>
  <h1>यह HTML Favicon का Example है 🪙</h1>
  <p>ऊपर Browser Tab में छोटा Icon देखें!</p>
</body>
</html>

Output: Browser Tab में favicon दिखाई देगा।

Bonus: Dynamic Favicon (Advanced)

आप चाहें तो JavaScript से भी favicon को runtime पर बदल सकते हैं:

<script>
document.querySelector("link[rel~='icon']").href = "new-favicon.png";
</script>

यह तब काम आता है जब आप light/dark theme के अनुसार favicon बदलना चाहें।

Format (फ़ॉर्मेट)	Description (विवरण)
.ico	Traditional Windows favicon (सबसे पुराना format)।
.png	Modern & High Quality (recommended ✅)। यह पारदर्शिता (transparency) को सपोर्ट करता है।
.jpg	भी चलेगा, लेकिन इसमें पारदर्शिता (transparency नहीं होती)। यह आमतौर पर कम अनुशंसित है।
.svg	Vector Icon — Infinite Quality (modern browsers only)। यह आकार बदलने पर भी स्पष्ट रहता है।