एचटीएमएल फ़ेविकॉन
फ़ेविकॉन ब्राउज़र टैब में पृष्ठ शीर्षक के आगे प्रदर्शित होने वाली एक छोटी छवि है।
HTML में फ़ेविकॉन कैसे जोड़ें
आप अपनी पसंद की किसी भी छवि को अपने फ़ेविकॉन के रूप में उपयोग कर सकते हैं। आप https://favicon.cc जैसी साइटों पर अपना खुद का फ़ेविकॉन भी बना सकते हैं ।
युक्ति: फ़ेविकॉन एक छोटी छवि होती है, इसलिए यह उच्च कंट्रास्ट वाली एक साधारण छवि होनी चाहिए।
ब्राउज़र टैब में पृष्ठ शीर्षक के बाईं ओर एक फ़ेविकॉन छवि प्रदर्शित होती है, जैसे:
अपनी वेबसाइट में फ़ेविकॉन जोड़ने के लिए, या तो अपनी फ़ेविकॉन छवि को अपने वेबसर्वर की रूट निर्देशिका में सहेजें, या छवियों नामक रूट निर्देशिका में एक फ़ोल्डर बनाएँ, और अपनी फ़ेविकॉन छवि को इस फ़ोल्डर में सहेजें। फ़ेविकॉन छवि के लिए एक सामान्य नाम "favicon.ico" है।
इसके बाद, तत्व <link>के बाद, अपनी "index.html" फ़ाइल में एक तत्व जोड़ें <title>, जैसे:
उदाहरण
<!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>
अब, "index.html" फ़ाइल को सहेजें और इसे अपने ब्राउज़र में पुनः लोड करें। आपका ब्राउज़र टैब अब पृष्ठ शीर्षक के बाईं ओर आपकी फ़ेविकॉन छवि प्रदर्शित करेगा।
फ़ेविकॉन फ़ाइल स्वरूप समर्थन
निम्न तालिका फ़ेविकॉन छवि के लिए फ़ाइल स्वरूप समर्थन दिखाती है:
| Browser | ICO | PNG | GIF | JPEG | SVG |
|---|---|---|---|---|---|
| Edge | Yes | Yes | Yes | Yes | Yes |
| Chrome | Yes | Yes | Yes | Yes | Yes |
| Firefox | Yes | Yes | Yes | Yes | Yes |
| Opera | Yes | Yes | Yes | Yes | Yes |
| Safari | Yes | Yes | Yes | Yes | Yes |
अध्याय का सारांश
<link>फ़ेविकॉन डालने के लिए HTML एलिमेंट का उपयोग करें
एचटीएमएल लिंक टैग
| Tag | Description |
|---|---|
| <link> | Defines the relationship between a document and an external resource |
सभी उपलब्ध HTML टैग्स की पूरी सूची के लिए, हमारे HTML टैग संदर्भ पर जाएं ।