Favicon in HTML is the small icon associated with a website or web page. It appears in browser tabs, bookmarks, history lists, shortcut icons, search results in some contexts, and saved website shortcuts. A favicon helps users recognize a site quickly, especially when many tabs are open.
The word favicon originally means favorite icon, but modern favicon usage is broader than one tiny icon. Websites often provide multiple icon files for different browsers, devices, tab sizes, pinned shortcuts, mobile home screen icons, and progressive web app experiences. HTML connects these files to the page using <link> tags inside the head section.
Basic Favicon Syntax in HTML
The simplest favicon is linked using rel="icon". The href points to the icon file. The type attribute can describe the file format, such as image/x-icon or image/png.
<head>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>Many browsers automatically look for /favicon.ico at the root of the website, but it is still better to declare the icon explicitly. Explicit links are clearer and allow you to provide multiple formats and sizes.
PNG Favicon Example
Modern websites often use PNG favicons because PNG supports transparency and is easy to export in multiple sizes. You can provide a 32×32 icon for normal browser tabs and a larger 192×192 icon for device shortcuts or app-like contexts.
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">The sizes attribute tells the browser the dimensions of the icon. Providing multiple sizes helps browsers choose the most suitable file instead of scaling one icon badly.
Common Favicon Formats
| Format | Use | Notes |
|---|---|---|
| ICO | Traditional favicon format | Can contain multiple sizes in one file |
| PNG | Modern browser icons | Good transparency and quality |
| SVG | Scalable icon | Supported by many modern browsers |
| Apple Touch Icon | iOS home screen icon | Uses rel=”apple-touch-icon” |
| Web App Manifest icons | PWA and installable app icons | Defined in manifest JSON |
For a simple site, a favicon.ico and a few PNG sizes may be enough. For a polished brand experience, add Apple touch icon and web app manifest icons too. The exact setup depends on the website type and how much device support you want.
SVG Favicon
An SVG favicon can scale cleanly because it is vector-based. This is useful for simple logos and icons. However, browser support and behavior may vary, so many sites provide SVG plus PNG or ICO fallback.
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="alternate icon" href="/favicon.ico" type="image/x-icon">This gives modern browsers an SVG option while still providing an ICO fallback. Keep SVG favicons simple because very detailed vector artwork may not look clear at tiny tab sizes.
Apple Touch Icon
Apple touch icons are used when users save a website to the home screen on iOS devices. These icons are usually larger than normal browser favicons and should be designed to look good as app-like icons.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">A 180×180 PNG is a common size for Apple touch icon. Avoid relying on a tiny favicon file for home screen icons because it may look blurry or poorly cropped.
Favicon with Web App Manifest
Progressive web apps and installable websites use a web app manifest file. The manifest can define app name, theme color, display mode, start URL, and icons in different sizes. The HTML page links to the manifest file.
<link rel="manifest" href="/site.webmanifest">Inside the manifest, icons are usually listed as an array. Browsers can choose the right icon for installation, splash screens, app switchers, and shortcuts.
{
"name": "NerdsDoStuff",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}Recommended Favicon Setup
A practical favicon setup often includes ICO, PNG icons, Apple touch icon, manifest, and theme color. You do not need every possible icon for every small project, but production websites should avoid using only one low-resolution file.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#111160">This setup covers normal browser tabs, older favicon behavior, iOS home screen icons, installable app icons, and browser UI color hints. It is a strong baseline for modern websites.
Where to Place Favicon Files
Favicon files are commonly placed in the website root, such as /favicon.ico and /favicon-32x32.png. They can also be placed in an assets folder, but then the href paths must point correctly. Root-level icons are convenient because some browsers and tools still look for favicon.ico automatically.
In WordPress, the site icon can often be set from the Customizer or Site Editor depending on the theme. WordPress then handles much of the favicon output automatically. For a custom HTML site, you usually write the link tags manually in the head.
Favicon Design Tips
A favicon is tiny, so it should be simple. Avoid small text, thin lines, complex screenshots, and too many colors. A strong favicon usually uses a recognizable letter, symbol, simplified logo, or high-contrast shape. It should remain clear at 16×16 or 32×32 pixels.
- Use a simple shape or logo mark.
- Keep strong contrast against transparent or browser backgrounds.
- Test the icon at 16×16 and 32×32 sizes.
- Export multiple sizes instead of relying on browser scaling.
- Avoid detailed text because it becomes unreadable.
- Keep the favicon consistent with the website brand.
Cache Issues with Favicon
Favicons are aggressively cached by browsers. After replacing a favicon, you may still see the old icon for a while. Clearing browser cache, using a new filename, or adding a version query can help during development.
<link rel="icon" href="/favicon-32x32.png?v=2" type="image/png">For production sites, changing filenames or version values should be done intentionally. Random cache busting is not needed every day, but it is useful when you update the brand icon and want browsers to fetch the new file.
Favicon in WordPress
In WordPress, the favicon is usually managed as the Site Icon. Depending on the theme, it can be set from Appearance, Customize, Site Identity, or from the Site Editor. WordPress then outputs the needed icon links automatically for many common browser and device cases.
The recommended WordPress site icon is usually a square image, commonly at least 512×512 pixels. WordPress can generate smaller versions from it. Still, the original design should be simple enough to remain recognizable after resizing. A detailed banner or full logo text is usually a poor favicon choice.
Testing a Favicon
After adding a favicon, test it in more than one place. Check the browser tab, bookmark, mobile shortcut, and social or app preview if relevant. Also test light and dark browser themes because transparent icons may look different depending on the surrounding UI.
If the favicon does not update, first suspect caching. Open the icon URL directly, hard refresh the page, clear browser cache, or test in another browser. If the direct icon URL still shows the old image, the server, CDN, or WordPress cache may need clearing.
Favicon and Brand Recognition
A favicon should represent the brand at a glance. Users often identify tabs by icon before reading tab text. For technical blogs, stores, dashboards, and documentation websites, a clear favicon makes navigation easier when many related tabs are open.
Because the space is tiny, the favicon should focus on the strongest brand mark. Use a symbol, initial, or simplified logo. The goal is recognition, not showing every detail from the full website logo.
Favicon File Paths
Favicon path mistakes are common. If the HTML says href="/favicon-32x32.png", that file must exist at the root of the website. If the file is inside an images folder, the href must include that folder path. A broken favicon path usually causes the browser to show a blank default icon.
When troubleshooting, open the favicon URL directly in the browser. If the image does not load directly, the issue is the file path, file permissions, caching layer, or server configuration rather than the link tag itself.
Also confirm that the file is square and exported in the expected format. A renamed file with the wrong internal format can confuse browsers and tools. Clean filenames, correct MIME type, and simple icon artwork make favicon setup much more reliable for production websites and blogs everywhere.
This keeps the icon predictable across browsers.
Common Favicon Mistakes
- Using only one tiny low-quality icon.
- Forgetting Apple touch icon for mobile saved shortcuts.
- Using a detailed logo that becomes unreadable at small size.
- Writing wrong file paths in favicon link tags.
- Thinking the favicon changed immediately while browser cache still shows the old one.
- Forgetting transparent background or proper square cropping.
Favicon in HTML is a small detail that affects brand recognition and polish. Add the icon links in the head section, provide suitable formats and sizes, keep the design simple, and test the result in browser tabs and mobile shortcuts.
Where is favicon added in HTML?
Favicon link tags are added inside the head section of the HTML document.
What size should a favicon be?
Common favicon sizes include 16×16, 32×32, 180×180, 192×192, and 512×512 depending on browser and device usage.
Continue learning HTML in order
Follow the topic sequence with the previous and next lesson.