A favicon is the small icon a browser displays next to a page’s title, most visibly in the browser tab, but also in bookmarks, history, and search results. Short for favorite icon, it is a tiny piece of branding that helps users recognize and distinguish your site among many open tabs. Although it is small, getting the formats, sizes, and declarations right matters for a polished, professional presentation across browsers, operating systems, and devices.
Key takeaways
- A favicon is the site icon shown in tabs, bookmarks, history, and search results.
- Browsers auto-request
/favicon.icoat the root, but explicitlinktags are more reliable. - Modern favicons can be
.ico,PNG, or scalableSVGfiles. - Provide multiple sizes so tabs, bookmarks, and mobile home screens all look sharp.
- Browsers cache favicons aggressively; version the filename to force updates.
- An SVG favicon can adapt to dark mode with a
prefers-color-schemequery.
Where do favicons appear?
The favicon shows up in more places than most developers realize, and each surface may pick a different size:
- Browser tabs and the address bar.
- Bookmarks and reading lists.
- Browser history entries.
- Mobile home-screen icons when a site is saved (often the Apple touch icon or manifest icon).
- Search engine results on mobile, where the favicon appears beside the listing.
Because these contexts range from a 16-pixel tab icon to a large home-screen tile, a single tiny image is rarely enough for a crisp result everywhere.
The favicon is also a small but real part of your brand identity. When a user has a dozen tabs open, the icon is often the only way they locate your site at a glance, so a distinctive, high-contrast mark earns its keep. That is why favicons should be treated as a design asset rather than an afterthought dropped in at the end of a project.
What formats and sizes should a favicon use?
There is no single perfect file. A robust approach supplies a few complementary assets.
| Asset | Format | Typical use |
|---|---|---|
| favicon.ico | ICO (multi-size) | Root fallback and legacy browsers |
| icon.svg | SVG | Scalable, dark-mode capable modern icon |
| Small PNG (for example 32×32) | PNG | Crisp tab icon |
| Apple touch icon (for example 180×180) | PNG | iOS home screen |
| Manifest icons (192 and 512) | PNG | Installable web apps |
An .ico file can contain several resolutions in one file, which is why it remains a convenient fallback. SVG is ideal where supported because one file scales to any size without blurring.
How do you add a favicon to a page?
Declare icons in the document head with link elements. Being explicit lets you control formats and sizes rather than relying on the default request.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">The browser chooses the most appropriate declared icon for each context. If you provide both an SVG and an ICO, capable browsers prefer the SVG while others fall back to the ICO. The manifest link supplies larger icons for installable progressive web apps.
How do browsers choose and cache favicons?
If no link tag is present, browsers automatically request /favicon.ico from the site root. When tags are present, the browser matches the rel, type, and sizes hints to the surface it is rendering and downloads the best fit.
Favicons are cached aggressively, often more persistently than ordinary images, which is why a new icon frequently fails to appear immediately. This is expected behavior, not a bug. The trade-off is deliberate: because the icon rarely changes and appears on almost every page, browsers prefer to keep it around rather than re-fetch it constantly, which is why a deployed change can appear stale even after a hard reload of the page content itself.
Why is my favicon not updating?
Stale favicons are the most common favicon complaint. To force a refresh:
- Version the filename or add a query string, such as
/icon.svg?v=2, so the browser treats it as a new resource. - Confirm the file is actually served with the correct content type by requesting its URL directly.
- Clear the browser cache or test in a private window to bypass the cached copy.
- Check for conflicting declarations, where an old
/favicon.icostill exists and overrides your intended icon.
Can a favicon support dark mode and high resolution?
Yes. An SVG favicon can carry its own styles, including a media query that swaps colors based on the system theme, so the icon stays legible on both light and dark tab bars.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<style>
path { fill: #111; }
@media (prefers-color-scheme: dark) { path { fill: #fff; } }
</style>
<path d="M2 2h12v12H2z" />
</svg>For raster icons, provide sizes that are multiples of the base, since high-density displays render icons at higher pixel ratios and a too-small source looks blurry.
How do you generate and organize a favicon set?
Because a complete favicon set spans several files and sizes, the reliable workflow is to start from one high-resolution master and derive the rest, rather than hand-editing tiny bitmaps. A square master of at least 512 by 512 pixels, with simple high-contrast artwork and generous padding, downsizes cleanly to every target.
From that master you typically produce:
- A multi-resolution
favicon.icofor the root and legacy browsers. - A scalable
icon.svgfor modern browsers and dark-mode support. - A small PNG such as 32 by 32 for crisp tabs.
- A 180 by 180 PNG for the Apple touch icon.
- 192 and 512 pixel PNGs referenced from the web app manifest.
Keep the files in a predictable location and declare them together. The manifest ties the installable-app icons to the rest:
{
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}A practical tip is to design the mark so it survives being cropped into a circle or rounded square, since different platforms mask home-screen icons differently. Testing the icon at true tab size, not zoomed in, is the fastest way to catch artwork that is too detailed to read.
What is the difference between a favicon and an app icon?
These are related but distinct. The favicon is the small browser-context icon shown in tabs, bookmarks, and search results. An app icon, delivered through the Apple touch icon or the manifest, is used when the site is installed or saved to a device home screen and is rendered much larger. They can share the same artwork, but they serve different surfaces at different sizes, which is why a robust site declares both rather than assuming a single tab-sized image covers every case.
What are common favicon mistakes?
- Shipping only a 16-pixel icon. It looks fine in a tab but blurry as a bookmark or home-screen tile.
- Forgetting the Apple touch icon. Without it, iOS may generate a low-quality screenshot for the home screen.
- Wrong content type. Serving an SVG as
text/plainor an ICO with a bad MIME type causes browsers to ignore it. - Excessive detail. Intricate artwork turns to mush at 16 pixels; favicons should be simple and high-contrast.
- Assuming instant updates. Not accounting for caching leads to confusion when the old icon persists.
Frequently asked questions
Where does the browser look for a favicon by default?
If no link tag is present, browsers request /favicon.ico at the site root automatically. Declaring icons explicitly with link tags is more reliable and flexible.
Do favicons still need to be .ico files?
No. Modern browsers support PNG and SVG favicons. Keeping a favicon.ico at the root remains a useful fallback for older browsers and default requests.
Why is my favicon not updating?
Browsers cache favicons aggressively. Force a refresh with a versioned filename or query string, clear the cache, or reload after the cache expires to see the new icon.
What size should a favicon be?
Provide several sizes. A 32 by 32 pixel icon covers browser tabs, larger sizes such as 180 by 180 serve Apple touch icons, and a scalable SVG adapts to any size.
Can a favicon adapt to dark mode?
Yes, with an SVG favicon that includes a prefers-color-scheme media query in its styles, the icon can switch colors based on the user’s system theme.
What is a web app manifest icon?
It is an icon declared in a manifest file used when a progressive web app is installed to the home screen or app launcher, separate from the browser tab favicon.
Does a favicon affect SEO?
It is not a ranking factor, but Google shows favicons next to results on mobile, so a clear, correctly declared icon improves recognition and click-through.