HTML Favicon
A favicon (short for "favorite icon") is a small yet important image that appears next to your website’s title in the browser tab. Also known as a tab icon or bookmark icon, it helps users quickly identify and return to your site. Studies show that over 85% of users rely on visual cues like favicons to recognize websites they trust.
They are used for several key purposes:
- Brand Recognition: They act as a visual marker that supports brand awareness.
- Professionalism: A well-designed favicon makes your site appear more credible.
- Usability: It enhances user experience by making it easier to locate your tab among many open ones.
How to Create and Add a Favicon
To create and add a favicon to your website, follow these simple steps to ensure it's displayed properly across different browsers and devices:
- Create Your favicon: Design a small image, typically 16x16 or 32x32 pixels, and save it in an appropriate format like .ico, .png, or .svg. In this example, we're using a .png format.
- Upload the favicon: Upload your favicon image to your website's root directory, or in this case, we'll use an external URL for the image.
- Add the favicon to HTML: Open your HTML file and add a <link> tag in the <head> section that points to the favicon.
- Test Your favicon: After adding the code, save your changes and upload the file to your server if you're working locally.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Favicon</title>
<!-- Add icon link -->
<link rel="icon" href="https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png" type="image/x-icon">
</head>
<body>
<h3 style="color:green;">GeeksforGeeks</h3>
<p>Welcome to my website</p>
</body>
</html>
Output
Code Overview:
- rel="icon": Indicates that the linked resource is an icon for the document. This relationship is essential for browsers to understand that the specified file is meant to be used as the website's favicon.
- href="https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png": Specifies the path to the favicon image. This can be a URL (as used here) pointing to an image that serves as the icon.
- type="image/x-icon": Specifies the MIME type of the favicon file. While commonly image/x-icon is used for .ico files, modern browsers support PNG and other formats as well.
Note: Major browsers are not supported by the sizing property of the favicon.
List of Favicon Sizes
Different devices and browsers may require favicons of various sizes. Here’s a list of common favicon sizes:
Name | Size | Description |
|---|---|---|
favicon-32.png | 32×32 | Standard for most desktop browsers. |
favicon-57.png | 57×57 | Standard iOS home screen. |
favicon-76.png | 76×76 | iPad home screen icon. |
favicon-96.png | 96×96 | GoogleTV icon. |
favicon-120.png | 120×120 | iPhone retina touch icon. |
favicon-128.png | 128×128 | Chrome Web Store icon & Small Windows 8 Star Screen Icon*. |
favicon-144.png | 144×144 | Internet Explorer 10 Metro tile for pinned site* |
favicon-152.png | 152×152 | iPad touch icon. |
favicon-167.png | 167×167 | iPad Retina touch icon (change for iOS 10: up from 152×152, not in action. iOS 10 will use 152×152) |
favicon-180.png | 180×180 | iPhone 6 plus |
favicon-192.png | 192×192 | Google Developer Web App Manifest Recommendation |
favicon-195.png | 195×195 | Opera Speed Dial icon (Not working in Opera 15 and later) |
favicon-196.png | 196×196 | Chrome for Android home screen icon |
favicon-228.png | 228×228 | Opera Coast icon |
Favicon File Format Support
Here’s a table summarizing the common file formats supported for favicons:
| File Format | Browser Support | Advantages | Disadvantages |
|---|---|---|---|
| ICO | Supports multiple sizes in a single file; widely supported | Larger file size compared to others | |
| PNG | All Five | High-quality image, supports transparency, smaller file size | Does not support multiple sizes in one file |
| GIF | All Five | Supports animation | Limited color palette (256 colors), less ideal for favicons |
| JPEG | All Five | Good for high-quality images | Does not support transparency, larger file size |
| SVG | All Five | Scalable, small file size, sharp quality at any resolution | Not supported by all browsers (especially older ones) |
| WebP | All Five | Smaller file size with high quality | Limited browser support, not widely used for favicons |
Troubleshooting Favicon Issues
Sometimes favicons don’t show up as expected. Here is how to troubleshoot some common issues:
- Clear Browser Cache: Browsers cache favicons, so clear the cache or try opening your website in incognito mode.
- Check File Path: Ensure the file path to your favicon is correct, and that it's in the root directory or properly referenced.
- Use Full URL: If the favicon still doesn’t appear, use the full URL:
<link rel="icon" href="https://www.example.com/favicon.ico" type="image/x-icon">- Format Issues: Double-check the favicon format (ICO, PNG, SVG) and make sure it’s supported across all browsers.
