HTML Favicon एक छोटा सा icon होता है जो browser tab, bookmarks और history में website के नाम के साथ दिखाई देता है।
Favicon website की branding और पहचान को मजबूत बनाता है।
Favicon क्या होता है
Favicon आमतौर पर 16×16 या 32×32 pixels का icon होता है।
यह browser tab में page title के पास दिखता है।
Uses: Browser tabs
Bookmarks
Mobile shortcuts
Search history
HTML में Favicon कैसे लगाते हैं
Favicon को HTML में <link> tag के जरिए <head> section में add किया जाता है।
Basic Favicon Syntax
<link rel="icon" href="favicon.ico">
यह favicon.ico file को load करेगा।
Complete HTML Example
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="icon" href="favicon.ico">
</head>
<body>
<h1>Welcome to My Website</h1>
</body>
</html>
Favicon के लिए Common File Formats
Favicon अलग-अलग formats में हो सकता है।
ICO
PNG
JPG
SVG
Recommended formats: PNG (modern browsers)
ICO (maximum compatibility)
PNG Favicon Example
<link rel="icon" type="image/png" href="favicon.png">
SVG Favicon Example
<link rel="icon" type="image/svg+xml" href="favicon.svg">
SVG favicons high-resolution screens के लिए अच्छे होते हैं।
Multiple Sizes के लिए Favicon
Different devices के लिए अलग sizes define किए जा सकते हैं।
<link rel="icon" sizes="16x16" href="favicon-16.png">
<link rel="icon" sizes="32x32" href="favicon-32.png">
Browser available size के हिसाब से icon select करता है।
Apple Touch Icon (iPhone / iPad)
Apple devices के home screen shortcut के लिए special icon use होता है।
<link rel="apple-touch-icon" href="apple-icon.png">
Favicon File कहाँ रखें
Best practice: Root directory में रखें
या images folder में रखें और correct path दें
Example:
<link rel="icon" href="/images/favicon.png">
Browser Cache Issue
कई बार favicon change करने के बाद भी पुराना icon दिखता है।
यह browser cache की वजह से होता है।
Solution: File name change करें
Version query add करें
<link rel="icon" href="favicon.png?v=2">
Common Favicon Problems
Favicon दिख नहीं रहा
Wrong file path
Unsupported format
Browser cache issue
SEO और Favicon
Favicon direct SEO ranking factor नहीं है, लेकिन: Brand trust बढ़ाता है
User experience improve करता है
CTR indirectly बेहतर हो सकता है
Best Practices
Simple और clear icon रखें
High contrast design use करें
Multiple sizes provide करें
PNG या SVG prefer करें
Real World Example
<head>
<title>Career Alert</title>
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16.png">
</head>
Summary
HTML Favicon website की visual identity का important हिस्सा है।<link rel="icon"> tag के जरिए favicon add किया जाता है।
Correct format, size और path देने से favicon सभी browsers में सही दिखता है।