A favicon (short for favorite icon) is a small icon that appears next to a website’s name in the browser tab, bookmarks, and search results. It helps users easily recognize your website and makes it look professional and branded.
You’ve probably noticed a small logo on the top of the browser tab that’s your site’s favicon,
Example:
- YouTube – red play icon
- Facebook – blue “f”
- Google – colorful “G”
Adding a favicon is a simple step, but it makes your website look complete and trustworthy.
A favicon is added inside the <head> section of your HTML document using the <link> tag.
<link rel="icon" type="image/x-icon" href="favicon.ico">- rel – Defines the relationship (should be icon)
- type – Specifies the MIME type (commonly image/x-icon)
- href – Defines the file path or URL of the favicon
Example of Adding a Favicon to Your Website
<!DOCTYPE html>
<html>
<head>
<title>HTML Favicon Example</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<h2>HTML Favicon Tutorial</h2>
<p>This webpage has a custom favicon in the browser tab.</p>
</body>
</html>When you open this page in a browser, a small icon (favicon.ico) will appear next to the page title in the tab bar.
Favicon File Location
You can place your favicon file,
- In the root directory of your website (recommended)
- Or in a subfolder (just update the path)
Example (root folder):
<link rel="icon" href="favicon.ico">Example (subfolder):
<link rel="icon" href="images/favicon.ico">Note: Browsers automatically try to find a file named favicon.ico in your site’s root directory so it’s best to keep it there for faster loading.
Favicon File Formats
1. ICO – Standard browser format (most supported)
Example Extension: .ico
2. PNG – High-quality transparent icons
Example Extension: .png
3. SVG – Vector-based (scales perfectly)
Example Extension: .svg
4. GIF – Can include animation
Example Extension: .gif
5. JPG/JPEG – Basic image format (not recommended for favicon)
Example Extension: .jpg
Using PNG Favicon
If your favicon is a .png file, use this format:
<link rel="icon" type="image/png" href="favicon.png">PNG favicons are lightweight and support transparency.
Using Multiple Favicon Sizes (For All Devices)
Modern browsers and devices (like smartphones and tablets) use different favicon sizes. You can define multiple sizes for better compatibility.
Example:
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">This ensures your favicon appears clearly on desktops, tablets, and mobile devices.
Apple and Android Favicons
Mobile browsers (like Safari or Chrome on Android) also support custom icons.
Example:
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">These make your site’s icon appear nicely when users save it to their home screen.
Adding Favicon Using External URL
You can also use an image hosted on another server as a favicon.
Example:
<link rel="icon" href="https://example.com/myicon.png">Common Favicon Sizes (Standard Reference)
- 16×16 px – Browser tab icon
- 32×32 px – Desktop browser high-resolution
- 48×48 px – Windows site icon
- 180×180 px – iPhone/iPad (Apple Touch Icon)
- 512×512 px – Android app shortcut
Full HTML Favicon Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Favicon Example</title>
<!-- Standard favicon -->
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- PNG format -->
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
</head>
<body>
<h2>HTML Favicon Example</h2>
<p>Check the browser tab to see the favicon.</p>
</body>
</html>