HTML Favicon

HTML Favicon क्या है?

Favicon एक छोटी सी Icon Image है, जो ब्राउज़र के Tab, Bookmark, और Address Bar में दिखाई देती है। यह वेबसाइट की पहचान बनाने और उसे पेशेवर दिखाने में मदद करता है। Favicon का उपयोग ब्रांडिंग और वेबसाइट को अधिक आकर्षक बनाने के लिए किया जाता है।

Favicon का उदाहरण:

जब आप YouTube, Facebook, या Google जैसी वेबसाइटें खोलते हैं, तो उनके ब्राउज़र टैब में उनका छोटा सा आइकन दिखाई देता है। यही Favicon है।

HTML में Favicon जोड़ने के लिए उपयोग किए जाने वाले टैग

HTML में Favicon जोड़ने के लिए <link> टैग का उपयोग किया जाता है।

Basic Syntax:

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

rel=”icon”: यह attribute ब्राउज़र को बताता है कि यह एक Favicon है।
type=”image/png”: यह Favicon की फाइल का प्रकार (format) निर्दिष्ट करता है। (जैसे PNG, ICO, आदि)
href: यह Favicon की फाइल का पथ (path) या URL निर्दिष्ट करता है।

Favicon जोड़ने का एक सरल उदाहरण

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <link rel="icon" type="image/png" href="favicon.png">
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>यह मेरी वेबसाइट का उदाहरण है।</p>
</body>
</html>

आउटपुट:

जब आप इस कोड को ब्राउज़र में खोलेंगे, तो टैब में “favicon.png” फाइल का आइकन दिखाई देगा।

Favicon के लिए फाइल का स्थान

Favicon को आप अपनी वेबसाइट की root directory में रख सकते हैं। यह SEO और वेबसाइट लोडिंग के लिए भी बेहतर होता है।

उदाहरण: https://www.example.com/favicon.ico

Favicon का Format

Favicon विभिन्न फाइल फॉर्मेट में हो सकता है। सबसे सामान्य फॉर्मेट निम्न हैं:

ICO (Icon File): सबसे सामान्य और पारंपरिक फॉर्मेट।
PNG (Portable Network Graphics): उच्च गुणवत्ता और पारदर्शिता का समर्थन करता है।
SVG (Scalable Vector Graphics): स्केलेबल और रेटिना डिस्प्ले के लिए उपयुक्त।
GIF (Graphics Interchange Format): एनीमेटेड फेविकॉन के लिए।

Favicon का आकार (Size)

आम तौर पर, Favicon का आकार 16×16 पिक्सल होता है। हालांकि, उच्च रेजोल्यूशन डिस्प्ले (जैसे रेटिना डिस्प्ले) के लिए 32×32, 48×48, और 64×64 पिक्सल भी उपयोग किए जा सकते हैं।

विभिन्न आकार के Favicon का उदाहरण:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="64x64" href="favicon-64x64.png">
</head>
<body>
  <h1>Favicon Example</h1>
</body>
</html>

Apple Devices के लिए Favicon

iPhone और iPad जैसे Apple डिवाइसों पर वेबसाइट का आइकन दिखाने के लिए, आप <link> टैग में rel="apple-touch-icon" का उपयोग कर सकते हैं।

उदाहरण:

<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">

Favicon को Testing और Debugging

पेज को रिफ्रेश करें: Favicon देखने के लिए ब्राउज़र का Cache साफ करें और पेज को रिफ्रेश करें।
Bookmark में जांचें: सुनिश्चित करें कि आपका Favicon ब्राउज़र के बुकमार्क में सही तरीके से प्रदर्शित हो रहा है।
DevTools का उपयोग करें: ब्राउज़र के Developer Tools में Resources टैब में जाकर Favicon की स्थिति की जांच करें।

Favicon को SEO-Friendly बनाना

Favicon की फाइल को Root Directory में रखें: यह सुनिश्चित करता है कि सभी ब्राउज़र इसे आसानी से पहचान सकें।
Favicon का Alt Text जोड़ें: यह Accessibility और SEO में मदद करता है।
सभी प्रमुख फॉर्मेट और आकार उपलब्ध कराएं: ताकि Favicon सभी डिवाइसों पर सही से दिखे।

Favicon के लिए Online Tools

Favicon बनाने और कन्वर्ट करने के लिए आप निम्न Online Tools का उपयोग कर सकते हैं:

निष्कर्ष

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