HTML Favicon Kya Hota Hai? Website me Favicon Kaise Lagaye

Apni Website ko ek Unique aur Professional Pehchan Dein

Favicon Kya Hota Hai?

Jab bhi aap kisi website ko browser me open karte hain, tab aap uske title ke paas ek chhota sa icon dekhte hain. Usi icon ko Favicon (Favorite Icon) kehte hain. Yeh ek mini-logo jaisa hota hai jo aapki website ki pehchan banata hai.

Favicon ka Purpose Kya Hai?

  • Brand Identity: Yeh aapki website ko ek unique visual identity deta hai.
  • User Experience: Jab users ke paas kai tabs open hote hain, toh favicon se woh aapki site ko aasaani se pehchan sakte hain.
  • Professionalism: Ek favicon website ko professional aur complete look deta hai.
  • Bookmarks & History: Yeh browser ke bookmarks aur history me bhi dikhta hai, jisse site ko recognize karna easy ho jaata hai.

HTML me Favicon Kaise Add Karein?

Favicon ko HTML document ke <head> section me <link> tag ka use karke add kiya jaata hai.

<head>
  <meta charset="UTF-8">
  <title>My Awesome Website</title>
  
  <!-- Yahaan favicon add karein -->
  <link rel="icon" type="image/png" href="/path/to/favicon.png">
</head>

Attributes Explained:

  • rel="icon": Yeh browser ko batata hai ki yeh file ek icon hai.
  • type="image/png": Yeh file ka MIME type specify karta hai.
  • href="/path/to/favicon.png": Yeh aapki favicon file ka path (URL) hota hai.

Favicon ke Best Formats

Favicon ke liye aap alag-alag formats use kar sakte hain, lekin yeh teen sabse common hain:

.ico

Yeh sabse traditional format hai aur sabhi browsers me supported hai. Ek .ico file me multiple sizes ki images ho sakti hain.

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

PNG format high quality aur transparent background support karta hai. Modern browsers ke liye yeh ek accha choice hai.

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

SVG ek vector format hai, jo kisi bhi size me sharp aur clear dikhta hai. High-resolution screens ke liye yeh best hai.

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

Key Takeaways

  • Favicon website ki branding aur user experience ke liye important hai.
  • Favicon ko HTML ke <head> section me <link rel="icon"> tag se add kiya jaata hai.
  • .ico, .png, aur .svg sabse common favicon formats hain.
  • Hamesha favicon ka sahi path href attribute me provide karein.
Bonus: Practical Application!
Apne webpage par aaj hi ek favicon add karke dekhein!

Ek simple <link> tag ka use karke apne project me ek icon jodein aur browser tab me result dekhein.

Practice in HTML Editor
Test Your Knowledge!
Kya aap HTML Favicon ke baare mein seekh chuke hain? Chaliye dekhte hain!

Apni knowledge test karne ke liye is quick quiz ko dein.

Start Quiz