HTML Favicon

एचटीएमएल पाविकॉन

एचटीएमएल पाविकॉन

बाविकॉन ब्राउज़र में पेज हेडर के बगल में प्रदर्शित एक छोटी छवि है।

HTML में बीविकॉन कैसे जोड़ें

आप अपनी पसंद की किसी भी छवि को अपने बाविकॉन के रूप में उपयोग कर सकते हैं। आप https://www.favicon.cc जैसी साइटों पर अपना स्वयं का फ़ेविकॉन बना सकते हैं।

💡सहायता नोट:

बाविकॉन एक छोटी छवि है, इसलिए यह उच्च कंट्रास्ट वाली एक साधारण छवि होनी चाहिए।

ब्राउज़र में पेज हेडर के बाईं ओर एक बाविकॉन छवि प्रदर्शित होती है:

बीविकॉन उदाहरण

<!DOCTYPE html>
<html>
<head>
  <title>My Page Title</title>
  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

अपनी वेबसाइट में एक बाविकॉन जोड़ना अपने बेविकॉन छवि को अपने वेब सर्वर की रूट डायरेक्टरी में सहेजें, या रूट निर्देशिका में इमेज नामक एक निर्देशिका बनाएं और इस निर्देशिका में अपनी बाविकॉन छवि को सहेजें। फ़ेविकॉन छवि का सामान्य नाम "favicon.ico" है।

इसके बाद, अपनी "index.html" फ़ाइल में <title> तत्व के बाद एक <link> तत्व जोड़ें:

अब, "index.html" फ़ाइल को सहेजें और इसे अपने ब्राउज़र में पुनः लोड करें। आपका ब्राउज़र आपकी बाविकॉन छवि को पृष्ठ शीर्षलेख के बाईं ओर प्रदर्शित करेगा।

बाविकॉन फ़ाइल स्वरूप समर्थन

निम्न तालिका बाविकॉन छवि के लिए फ़ाइल प्रारूप समर्थन दिखाती है:

ब्राउज़र ICO PNG GIF JPEG SVG
किनारा हाँ हाँ हाँ हाँ हाँ
क्रोम हाँ हाँ हाँ हाँ हाँ
फ़ायरफ़ॉक्स हाँ हाँ हाँ हाँ हाँ
ओपेरा हाँ हाँ हाँ हाँ हाँ
सफ़ारी हाँ हाँ हाँ हाँ हाँ

अध्याय का सारांश

पैविकॉन डालने के लिए HTML <link> तत्व का उपयोग करें

अभ्यास

❓बाविकॉन को किस HTML तत्व में परिभाषित किया गया है?

<img> तत्व
✗ ग़लत!
<शरीर> तत्व
✗ ग़लत!
<लिंक> तत्व
✓ ठीक है!
<शैली> तत्व
✗ ग़लत!

HTML लिंक टैग

टैग व्याख्या
<link> किसी दस्तावेज़ और बाहरी संसाधन के बीच संबंध को परिभाषित करता है

सभी उपलब्ध HTML टैग्स की पूरी सूची के लिए, हमारे HTML टैग संदर्भ पर जाएँ।