लोड हो रहा है...

HTML फ़ेवआइकन

Head सत्र ने charset, viewport, title और एक stylesheet लिंक के साथ एक शुरुआती मेटाडेटा बॉक्स बनाया। फ़ेवआइकन head का एक और व्यावहारिक लिंक है: वह छोटा आइकन जो ब्राउज़र टैब में आपके पेज शीर्षक के बगल में दिखता है। यह भीड़ भरे टैब, बुकमार्क और कुछ इतिहास सूचियों में आपकी साइट पहचानने में मदद करता है। आप इसे CSS टेक्स्ट से नहीं बनाते — आप ब्राउज़र को एक छोटी इमेज फ़ाइल की ओर इशारा करते हैं।

फ़ेवआइकन क्या है

फ़ेवआइकन एक साइट आइकन संसाधन है। ब्राउज़र इसे इसलिए लाते हैं क्योंकि आपका HTML (या /favicon.ico जैसी डिफ़ॉल्ट अनुमान) बताता है कहाँ देखना है। आधुनिक पेज आमतौर पर इसे link एलिमेंट से स्पष्ट रूप से घोषित करते हैं ताकि पथ और फ़ाइल प्रकार साफ़ हों। आइकन सरल और इतना वर्गाकार रहना चाहिए कि बहुत छोटी साइज़ पर भी पढ़ा जा सके।

सीधा उत्तर

दस्तावेज़ के head में rel="icon" वाला link जोड़ें और ऐसा href जो आपकी आइकन फ़ाइल की ओर इशारा करे। आम विकल्प हैं favicon.ico, images/favicon.png जैसा PNG, या SVG आइकन। पथ उसी तरह resolve होना चाहिए जैसे अन्य relative URL (फ़ाइल पथ देखें)। फ़ाइल बदलने के बाद ब्राउज़र कैश की उम्मीद रखें — हार्ड रिफ़्रेश या निजी विंडो अक्सर सामान्य रीलोड से तेज़ी से नया आइकन दिखाती है।

क्लासिक .ico लिंक

कई ट्यूटोरियल अभी भी HTML फ़ाइल के उसी फ़ोल्डर में favicon.ico से शुरू करते हैं। वैकल्पिक type विशेषता ब्राउज़र को संसाधन समझने में मदद कर सकती है।

क्लासिक फ़ेवआइकन लिंक

html

HTML Code

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

क्लासिक सैंपल पढ़ना

link head में रहता है, title और अन्य मेटाडेटा के साथ
rel="icon" संसाधन को फ़ेवआइकन चिह्नित करता है
href="favicon.ico" मानता है कि आइकन फ़ाइल इस HTML पेज के पास है
type="image/x-icon" .ico फ़ाइलों के लिए आम MIME संकेत है
सही पथ के बिना टैब डिफ़ॉल्ट या खाली आइकन रख सकता है

PNG और SVG वेरिएंट

PNG फ़ेवआइकन डिज़ाइन टूल से निर्यात करना आसान है। SVG फ़ेवआइकन अलग-अलग स्केल पर तेज़ रहते हैं जब ब्राउज़र उन्हें सपोर्ट करता है। आप आइकन को images फ़ोल्डर में रख सकते हैं और href वहाँ पॉइंट कर सकते हैं।

PNG या SVG फ़ेवआइकन

html

HTML Code

<head>
<title>My Site</title>
<link rel="icon" href="images/favicon.png" type="image/png">
<!-- or: href="images/icon.svg" type="image/svg+xml" -->
</head>

शुरुआती फ़ॉर्मेट चुनना

.ico — पारंपरिक, पुराने टूलिंग में व्यापक रूप से पहचाना जाता है
.png — शुरुआती लोगों के लिए सरल जो पहले से PNG एसेट निर्यात करते हैं
.svg — कुरकुरा वेक्टर विकल्प जब आपके दर्शकों के ब्राउज़र इसे सपोर्ट करते हैं
आपको पहले दिन हर फ़ॉर्मेट की ज़रूरत नहीं। एक साफ़ आइकन सही लिंक के साथ भेजें, फिर बाद में apple-touch या मल्टी-साइज़ पैकेज के लिए विस्तार करें अगर प्रोजेक्ट माँगे।

पथ मार्कअप जितना ही महत्वपूर्ण हैं

अगर href गायब फ़ाइल की ओर इशारा करे, फ़ेवआइकन अनुरोध 404 लौटाता है और टैब आइकन चुपचाप विफल हो जाता है। फ़ोल्डर नाम, वर्तनी, और क्या HTML फ़ाइल आइकन के बिना चली गई — जाँचें। Relative पथ HTML दस्तावेज़ URL के सापेक्ष होते हैं, इस भावना के नहीं कि फ़ाइल «कहाँ होनी चाहिए»।

कैश अपडेट छिपा सकता है

ब्राउज़र अक्सर फ़ेवआइकन को आक्रामक रूप से कैश करते हैं। आप favicon.png बदलते हैं, रीलोड करते हैं, और फिर भी कल का निशान देखते हैं। इसका मतलब हमेशा यह नहीं कि HTML गलत है। हार्ड रिफ़्रेश, निजी/इन्कॉग्निटो विंडो आज़माएँ, या अस्थायी रूप से फ़ाइल का नाम बदलें और href अपडेट करें ताकि ब्राउज़र ताज़ा URL लाए। यह आदत जल्दी सिखाएँ ताकि शिक्षार्थी घबराकर काम कर रहा मार्कअप न मिटा दें।

आइकन छोटे और स्पष्ट रखें

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

लिंक कहाँ होना चाहिए

फ़ेवआइकन link एलिमेंट head में रखें। उन्हें body में रखना दस्तावेज़-स्तरीय आइकन के लिए गलत जगह है। आप पहले से जानते हैं कि head मेटाडेटा और संसाधन लिंक के लिए है; फ़ेवआइकन उसी नियम का पालन करते हैं।

अपने एडिटर में अभ्यास

अपने HTML फ़ाइल के पास या images फ़ोल्डर के अंदर एक छोटा वर्गाकार आइकन रखें।
मिलते पथ के साथ head के अंदर <link rel="icon" href="..."> जोड़ें।
पेज खोलें और शीर्षक टेक्स्ट के बगल में ब्राउज़र टैब देखें।
जानबूझकर पथ तोड़ें, रीलोड करें, और नोट करें कि आइकन गायब होता या वापस आता है — फिर ठीक करें।
आइकन फ़ाइल बदलें और, अगर पुरानी चिपक जाए, नई आर्ट की पुष्टि के लिए निजी विंडो खोलें या हार्ड-रिफ़्रेश करें।

आसान गलतियाँ

फ़ेवआइकन link को head की जगह body में रखना
गलत href ताकि आइकन 404 हो जबकि पेज HTML अभी भी ठीक दिखे
पुराना फ़ेवआइकन कैश में होने पर तुरंत दृश्य अपडेट की उम्मीद
छोटे, सरल वर्गाकार निशान की जगह विशाल फोटोग्राफ इस्तेमाल करना
केवल HTML डिप्लॉय करते समय आइकन फ़ाइल अपलोड भूल जाना
rel="stylesheet" को rel="icon" से मिलाकर यह सोचना कि CSS या टैब आइकन क्यों गलत व्यवहार करता है

सारांश

फ़ेवआइकन head में rel="icon" से लिंक होते हैं
href को असली .ico, .png, या .svg फ़ाइल की ओर पॉइंट करें
सही पथ और शांत कैश जाँच ज़्यादातर «गायब आइकन» रिपोर्ट हल करती हैं
आइकन छोटे और टैब साइज़ पर पहचाने जाने योग्य रखें
एक काम करने वाला लिंक बेकार आइकन फ़ॉर्मेट के ढेर से बेहतर है

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓

प्रश्न

🎯

70%

पास करने के लिए

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

हर प्रश्न को ध्यान से पढ़ें
हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
आपकी प्रगति शीर्ष पर दिखाई जाएगी

भाषा