A favicon (short for “favorite icon”) is a small image displayed in the browser tab, bookmarks, and sometimes in search results.
It helps users quickly identify a website and enhances brand recognition.
What This Tutorial Covers:
- What is a favicon
- Creating a favicon
- Adding a favicon to an HTML page
- Favicon formats and sizes
- Best practices for favicons
- Troubleshooting favicon issues
1. What is a Favicon?
A favicon is a small 16×16 or 32×32 pixel icon associated with a webpage. It appears in:
- Browser tabs
- Bookmarks
- Search engine results
- Mobile home screens (progressive web apps)
2. Creating a Favicon
2.1 Tools to Create a Favicon
You can create a favicon using:
- Online generators: favicon.io, realfavicongenerator.net
- Graphic design software: Photoshop, GIMP, Canva
- Converting an image to favicon: Use .png, .jpg, or .svg and convert to .ico
2.2 Recommended Sizes
| Device | Icon Size |
|---|---|
| Standard Favicon | 16×16 px |
| High-resolution Browsers | 32×32 px |
| Apple Touch Icon | 180×180 px |
| Android Chrome | 192×192 px |
| Windows Tiles | 150×150 px |
3. Adding a Favicon to an HTML Page
The favicon is added inside the <head> section of the HTML file using the <link> tag.
3.1 Basic Favicon (.ico format)
<head>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
3.2 PNG Favicon
<head>
<link rel="icon" type="image/png" href="favicon.png">
</head>
3.3 SVG Favicon (Vector Format)
<head>
<link rel="icon" type="image/svg+xml" href="favicon.svg">
</head>
3.4 Apple Touch Icon (For iPhones & iPads)
<head>
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
</head>
3.5 Multiple Favicons for Different Devices
<head>
<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="icon" type="image/png" sizes="192x192" href="android-chrome-192x192.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
</head>
4. Favicon Formats and Sizes
4.1 Supported File Formats
| Format | Description |
|---|---|
| .ico | Standard format for favicons |
| .png | High-resolution, transparent background support |
| .svg | Scalable and lightweight |
| .jpg | Not recommended (no transparency) |
4.2 Where to Place the Favicon
- Store the favicon in the root directory (/favicon.ico) so browsers can find it automatically.
- Alternatively, place it inside a folder (/images/favicon.ico) and reference it with <link>.
5. Best Practices for Favicons
Keep it Simple
- Use a minimalistic design to ensure clarity at small sizes.
Use Transparent Backgrounds
- .png and .svg support transparency, making the icon adaptable to different themes.
Provide Multiple Sizes
- Different devices require different sizes, so include:
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
Compress and Optimize
- Use tools like TinyPNG or Squoosh to reduce file size.
6. Troubleshooting Favicon Issues
🔹 Favicon Not Showing?
Check File Path
Make sure the correct file path is used:
<link rel="icon" type="image/png" href="/images/favicon.png">
Clear Browser Cache
Favicons are cached by browsers. Clear the cache using:
- Hard refresh: Ctrl + Shift + R (Windows) or Cmd + Shift + R (Mac)
- Manually delete browser cache
Test with Different Browsers
- Some browsers may require different formats (.ico vs .png).
Ensure Correct MIME Type
For .ico files, the web server should send the correct MIME type:
image/x-icon
Use Chrome DevTools (F12 > Console) to check for favicon errors.
Conclusion
By following best practices and using the correct formats, you can ensure that your favicon displays correctly on all browsers and devices.
