How to Add a Favicon in HTML (And Which rel Tags to Use)

Adding a favicon to your website should be one of the simplest tasks in web development, yet it trips up developers more often than you might expect. Between conflicting advice on which <link> tags to use, confusing rel attribute values, and browsers that stubbornly cache the old icon, getting a favicon to actually show up can feel like a guessing game.

The truth is that the favicon setup for most websites can be reduced to a single file and a single HTML tag. This guide cuts through the noise and gives you exactly what you need: the minimal practical setup, the most useful rel tag variations, and clear instructions for dealing with caching problems that make your new favicon invisible.

If you do not have a favicon.ico file yet, create one with Any2ICO in under a minute. It accepts PNG, SVG, JPG, WebP, and other formats, and produces a multi-size ICO file that works everywhere. Then come back here to wire it into your HTML.

The Simplest Favicon Setup

Before diving into tag variations and edge cases, here is the approach that works for the overwhelming majority of websites. It requires one file and one line of HTML.

Place favicon.ico at the root of your domain. Upload or deploy your favicon.ico file so that it is accessible at https://yourdomain.com/favicon.ico. This is the path that browsers have checked by default since the late 1990s. Even without any HTML tags pointing to it, most browsers will find and display a favicon at this location automatically. This convention is baked into browser behavior and is not going away.

Add one link tag to your HTML head. While the root-path convention works on its own, adding an explicit tag removes all ambiguity and ensures consistent behavior across browsers, subdomains, and single-page applications where the document root may not map directly to the server root.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Your Page Title</title>
  <link rel="icon" href="/favicon.ico" sizes="any">
</head>
<body>
  <!-- your content -->
</body>
</html>

That single <link> tag is enough for every major browser: Chrome, Firefox, Safari, Edge, and even legacy versions of Internet Explorer. The sizes="any" attribute tells the browser that the ICO file contains multiple resolutions and it should select the most appropriate one for the current context, whether that is a 16x16 tab icon or a 32x32 bookmark icon.

This is the setup we recommend for most websites. It is simple, reliable, and universally supported. You can stop here and your favicon will work correctly in virtually every scenario.

Caching and "Favicon Not Showing"

You deployed your new favicon, refreshed the page, and the old icon is still staring back at you from the browser tab. This is not a bug in your code. It is almost certainly a caching issue, and it is by far the most common reason developers think their favicon setup is broken when it is actually working perfectly.

Browsers cache favicons aggressively. Unlike regular page assets, favicons are often cached separately and for much longer periods. Chrome, for instance, stores favicons in a dedicated database that does not always respond to a normal page refresh. Firefox and Safari have similar behavior. This means that even after you replace the file on your server, the browser may continue to display the old icon for hours or even days.

Hard refresh: Press Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (macOS) to bypass the cache and reload all assets from the server. This works for most page resources but does not always clear the favicon cache specifically.

Incognito window: Open your site in a private or incognito browsing window. This starts with a completely empty cache and will load the favicon fresh from the server. If you see the correct favicon in incognito mode, your setup is correct and the normal browsing session simply needs time to pick up the change.

Clear browser cache manually: If incognito confirms the new favicon but your regular session still shows the old one, clear your browser's cached images and files. In Chrome, go to Settings, Privacy and Security, Clear browsing data, and select Cached images and files. After clearing, reload your site.

Add a cache-busting query string: As a temporary measure during development, you can append a query string to force the browser to treat the favicon as a new resource: <link rel="icon" href="/favicon.ico?v=2" sizes="any">. Increment the version number each time you update the favicon. Remove the query string once you are satisfied with the icon, or keep it as a permanent versioning strategy.

Sizes and File Choices: ICO vs PNG

Should you use an ICO file, a PNG file, or both? The answer depends on how much complexity you want in your setup and which browsers you need to support.

ICO is the universal choice. The ICO format has been the standard favicon format since Internet Explorer 5 introduced favicons in 1999. Every browser that supports favicons supports ICO. A single ICO file can contain multiple sizes (16x16, 32x32, 48x48, and more), so the browser always has the right resolution available without you needing to maintain separate files for each size. For simplicity and maximum compatibility, ICO is the safest bet.

PNG is a modern alternative. All current versions of Chrome, Firefox, Safari, and Edge support PNG favicons through the <link rel="icon" type="image/png"> tag. PNG favicons are slightly simpler to create (a single PNG file at one size) but you need a separate file and tag for each size you want to provide. This can mean two or three additional link tags in your HTML head.

SVG is the newest option. SVG favicons are supported in Chrome, Firefox, and Edge, but not in Safari as of early 2025. An SVG favicon scales perfectly to any size, which is appealing for high-DPI displays. However, the lack of Safari support means you still need an ICO or PNG fallback.

For most websites, we recommend the pragmatic approach: use a multi-size ICO file as your primary favicon and optionally add a PNG or SVG icon as an enhancement. This gives you universal compatibility through the ICO file and modern optimization through the additional formats. For a detailed breakdown of which sizes to include and why, see our favicon sizes explained guide.