How to Add a Favicon in HTML

To add a favicon, place a link element inside the head of your HTML document. Set its rel attribute to "icon" and its href attribute to the location of the icon file. The browser reads that element and shows the image in the tab, bookmarks and history. The rest of this guide covers which files to supply, where to put them, how to prepare logo artwork so it survives at tiny sizes, how to add a dark mode variant, and how to confirm the result.

What a favicon is in HTML

A favicon (short for "favorite icon") is the small image a browser associates with a website. In HTML it is not a special tag. It is an ordinary link element that declares a relationship between the page and an icon file. The page itself never displays the favicon. The browser decides where and at what size to render it.

favicon.ico is the traditional file name. ICO is a container format that can hold several raster images at different pixel dimensions in one file, and the browser picks the one that fits. Many browsers request a file with that name from the root of the site even when no link element exists. Because of this, a root-level favicon.ico is still a common fallback.

Which attribute is used for a favicon

The rel attribute makes a link element a favicon declaration. Its standard value is "icon". The older value "shortcut icon" still appears in legacy code and is generally tolerated, but "icon" is the documented form. Three other attributes support it:

• href: the path to the icon file. This is required, because without it the browser has nothing to load.
• type: the file's media type, for example image/svg+xml for SVG or image/png for PNG. It helps the browser skip formats it cannot use.
• sizes: the pixel dimensions the file contains, or "any" for scalable or multi-size files. It helps the browser choose between several declared icons.

Where to put the favicon code and files

The link elements belong inside the head element of every page that should show the icon. On a site built with templates, that usually means the shared header template, not each page by hand. The icon files can live in any publicly served folder as long as href points to them correctly. Placing favicon.ico at the site root also covers browsers that request it there automatically.

<head>
  <meta charset="utf-8">
  <title>Page title</title>
  <link rel="icon" href="favicon.ico" sizes="any">
  <link rel="icon" href="favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="apple-touch-icon.png">
</head>

This example declares three files. Browsers that support SVG favicons can use the scalable SVG file. The ICO file serves as the broad fallback. The apple-touch-icon is a separate PNG that Apple devices use when someone saves the site to a home screen. Browser support for SVG favicons and the exact pixel dimensions each platform expects change over time. Confirm both against current browser and platform documentation before you finalize your files.

File | Format type | Typical role

favicon.ico | Raster container, can hold multiple sizes | Broad fallback, often placed at the site root

favicon.svg | Vector (when it contains only paths and shapes) | Scalable tab icon, can include a dark mode variant

apple-touch-icon.png | Raster | Home-screen icon on Apple devices

A file extension does not prove what is inside. An .svg file can wrap an embedded bitmap, and an .ico file is always raster. Open the file and inspect it rather than trusting the name. Having a logo file also does not grant permission to use it. Confirm you have the rights to use the mark before publishing it as an icon.

Preparing logo artwork for favicon use

A full logo rarely works at favicon size. Before exporting anything, check that you have the following:

• An editable vector source of the logo, meaning artwork built from paths: mathematically defined lines and curves, not pixels.
• A simplified mark suited to tiny display, such as a symbol, monogram or single letterform rather than a full wordmark.
• A square artboard, because favicons are displayed in square slots.

With those in place, prepare the artwork in this order:

• 1. Simplify the geometry. Remove fine details, thin hairlines and small counters (the enclosed spaces inside letters such as o or e) that will fill in at small sizes. Reduce anchor points where curves can be expressed more simply.
• 2. Convert type to outlines. Turn any live text into paths so the result does not depend on a font being installed. Keep an unconverted copy for future edits.
• 3. Convert strokes to fills. Outline strokes so line weight does not shift when the icon is scaled, and so that every shape is a filled path.
• 4. Merge and clean paths. Combine overlapping shapes where appropriate. Delete hidden layers, stray points and empty groups. Check that holes in shapes render as intended under the file's fill rule.
• 5. Center the mark on the square artboard with deliberate padding, and look at it at its smallest display size to judge legibility.
• 6. Export an SVG with unnecessary editor metadata removed. Then export raster PNG renders at the sizes your target platforms document, and build the ICO file from those renders with an ICO-capable export tool or converter.

Menu names, export dialogs and optimization options differ between design applications and between versions of the same application. Check your application's documentation for the version you use instead of relying on generic menu paths.

Adding a dark mode favicon variant

A dark mark can disappear against a dark browser interface. An SVG favicon can carry its own color rules: a style block inside the SVG can use the prefers-color-scheme media query to swap fills when the user's system or browser is set to a dark theme. Only one file and one link element are needed.

<svg viewBox="0 0 32 32">
  <!-- keep the xmlns namespace attribute your editor exports on this element -->
  <style>
    .mark { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f2f2f2; }
    }
  </style>
  <path class="mark" d="..." />
</svg>

In this example, the viewBox values define the internal coordinate system only. Use whatever your exported artwork uses. The colors are placeholders, so choose values from your brand palette that keep enough contrast in both themes. Replace the d value with your logo's path data.

This query reflects the user's color-scheme preference. It does not detect the actual color behind the tab, which can vary by browser, theme and whether the tab is active. Treat the variant as a contrast improvement rather than a guarantee. Some designers avoid the issue by giving the mark a solid background shape that reads in either theme.

There is an alternative for raster files: declare separate light and dark icons with a media attribute on each link element. Browser support for media on icon links has been inconsistent. Test it in the browsers your audience uses before relying on it, and keep a fallback icon that reads acceptably in both themes.

<link rel="icon" href="favicon-light.png" media="(prefers-color-scheme: light)">
<link rel="icon" href="favicon-dark.png" media="(prefers-color-scheme: dark)">

How to confirm the favicon works

• Open the page and look at the browser tab. Browsers cache favicons aggressively, so if the old icon or no icon appears, try a hard refresh, a private window or a cleared cache.
• Open the browser's developer tools, reload the page, and check the network panel. Each icon file should load successfully rather than returning a not-found error.
• Open each icon file directly in the browser to confirm the path in href is correct and the file displays.
• Switch your operating system or browser between light and dark themes and check that the dark mode variant changes and stays legible.
• Test in more than one browser and on a mobile device, since each may choose a different declared file.
• Add a bookmark or save the site to a home screen to check the larger icons used outside the tab.
• Run the page through an HTML validator to catch a malformed link element or one placed outside the head.

This guide does not state exact required pixel dimensions or a current browser support matrix, because no confirmed figures were available for it. Take those details from up-to-date browser and platform documentation when you finalize your file set.