HTML Tutorial: HTML Favicon
Learn how to add favicons to your website for branding and browser tab recognition
Favicons are small icons displayed in the browser tab, bookmarks, and shortcuts. They enhance website branding and user recognition.
1️⃣ Adding a Favicon
INPUT:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="icon"
href="favicon.ico"
type="image/x-icon"
>
</head>
<body>
Welcome to my website!
</body>
</html>
OUTPUT:
Browser tab shows a favicon icon (favicon.ico) beside the page title "My Website".
✔️ rel="icon" tells the browser this is a favicon
✔️ href points to the favicon file
✔️ type="image/x-icon" specifies the file type
2️⃣ Using PNG Favicon
You can use PNG images as favicons instead of .ico.
INPUT:
<link rel="icon"
href="favicon.png"
type="image/png"
>
OUTPUT:
Browser tab now displays favicon.png as the website icon.
✔️ PNG favicons support transparency ✔️ Ideal for modern web design
3️⃣ Multiple Favicon Sizes
You can define multiple sizes for different devices using sizes attribute.
INPUT:
<link rel="icon" href="favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="favicon-16x16.png" sizes="16x16" type="image/png">
OUTPUT:
Browser chooses appropriate favicon size based on device and resolution.
✔️ Ensures crisp icons on retina displays and mobile devices ✔️ Improves branding consistency
4️⃣ Favicon Best Practices
- Use square images (16x16, 32x32, 48x48)
- Use
ICOorPNGformats - Include multiple sizes for responsiveness
- Keep design simple and recognizable
- Place favicon file in root directory for easier referencing
🚀 What’s Next?
👉 HTML Page Title
Next lesson will cover:
- Setting page titles with
<title> - SEO importance of page titles
- Dynamic titles for different pages
Favicons improve website recognition, user experience, and brand visibility across browsers.