HTML Favicon: ब्राउज़र टैब का आइकन कैसे बनाएँ
3 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
अपने browser के tabs को देखें। हर tab में title के बाईं ओर एक छोटा icon होता है — वही favicon है ("favourite icon" का छोटा रूप)। यह आपकी वेबसाइट का छोटा सा logo है। इसके बिना browser एक सादा default icon दिखाता है, और आपकी साइट अधूरी लगती है।
फ़ेविकॉन कैसे जोड़ें
एक छोटी square तस्वीर बनाएँ — 32×32 या 48×48 pixels काफी हैं — उसे favicon.ico या favicon.png नाम से सहेजें, अपनी वेबसाइट के main folder में रखें, और अपने पेज के <head> के अंदर यह line जोड़ें:
<link rel="icon" type="image/png" href="favicon.png">
Icon बनाना
किसी भी image editor से अपने logo को छोटा square बनाएँ। favicon.io जैसे मुफ्त online tools कुछ ही सेकंड में PNG या किसी अक्षर से सही favicon file बना देते हैं। Design बहुत साधारण रखें — 16 pixels चौड़ा होने पर बारीक details गायब हो जाती हैं। एक अक्षर या एक मोटा आकार सबसे अच्छा काम करता है।
फ़ेविकॉन कहाँ-कहाँ दिखता है
Browser tabs के अलावा, फ़ेविकॉन bookmarks में, browser history में, और phone की home screen पर भी दिखता है जब कोई आपकी साइट को सहेजता है। यह छोटी सी detail है, लेकिन इससे आपकी साइट professional लगती है और पहचानने में आसान हो जाती है।
फ़ेविकॉन क्या होता है
फ़ेविकॉन वह छोटा icon है जो browser आपके पेज के title के बगल में दिखाता है — tab में, bookmarks में, और browser history में। यह आमतौर पर 16 by 16 pixels का होता है, इतना छोटा कि detail मुश्किल से दिखती है। लेकिन इससे आपकी साइट पूरी और professional लगती है, और बीस खुले tabs में visitor को अपना tab खोजने में मदद मिलती है।
याद रखने की तरकीब: छोटा icon, बड़ी पहचान — tab में आपकी साइट को पहचानने का यही निशान है।
Link के attributes
| Attribute | मान | विवरण |
|---|---|---|
rel | icon | Browser को बताता है कि यह link पेज का icon है। |
type | image/png, image/x-icon | Icon की file का format। |
sizes | 16x16, 32x32 | Icon का आकार, ताकि browser सही वाला चुन सके। |
href | a file path | Icon की file कहाँ है। |
Link <head> में जाता है। आप एक से ज़्यादा आकार दे सकते हैं — browser सबसे अच्छा fit चुनता है:
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32.png"> <link rel="icon" type="image/png" sizes="16x16" href="favicon-16.png">
.ico है, जिसमें एक ही file में कई आकार हो सकते हैं और जो हर browser में चलता है, यहाँ तक कि बहुत पुराने browsers में भी। आधुनिक .png सभी मौजूदा browsers में चलता है और logo से बनाना आसान है।आम गलतियाँ
<link>को<body>में डालना — वह<head>में होता है।- पूरे आकार के logo को फ़ेविकॉन बनाना — 2000-pixel की तस्वीर 16 pixels पर सिकुड़कर धुंधली दिखती है। साधारण, मोटा version बनाएँ।
- File को server पर upload करना भूल जाना — link जिस file की ओर इशारा करता है, वह असल में upload होनी चाहिए।
- एक बार जाँचकर हार मान लेना जब पुराना icon दिखे — पहले cache साफ़ करें और private window में आज़माएँ।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>Favicon</title>
<link rel="icon" type="image/png" href="favicon.png">
</head>
<body>
<h1>My Site</h1>
<p>Look at the browser tab — it shows my favicon.</p>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
संबंधित पाठ
अक्सर पूछे जाने वाले सवाल
इस पाठ के बारे में सबसे ज़्यादा पूछे जाने वाले सवाल — सवाल पढ़ें, फिर खोलकर जवाब देखें।
1. फ़ेविकॉन क्या होता है?
यह ब्राउज़र टैब, बुकमार्क और हिस्ट्री में पेज के टाइटल के बगल में दिखने वाला छोटा आइकन होता है।
2. पेज में फ़ेविकॉन कैसे लगाते हैं?
छोटी वर्गाकार इमेज बनाकर head के अंदर rel icon वाला link जोड़ें।
3. फ़ेविकॉन बदलने के बाद भी पुराना क्यों दिखता है?
ब्राउज़र फ़ेविकॉन को मज़बूती से कैश करता है, इसलिए पेज को हार्ड-रिफ़्रेश करें या प्राइवेट विंडो में देखें।
खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 35 पाठ पूरे करें, टेस्ट पास करें (80%), ₹10 दें और अपना सर्टिफिकेट पाएँ।
टेस्ट देंदेखकर सीखना पसंद है? वीडियो कोर्स में वही विषय एक-एक करके सिखाए जाते हैं।
Go further with a full course
Free tutorials teach you the basics. Our paid courses add live projects, mentorship and a certificate.
Browse all courses
