How to Add a Favicon to an HTML Site

To add a favicon to an HTML site, put an icon file in your project and reference it with a link element inside the page's head section, using rel="icon". That single tag is the core of the answer. Everything else in this guide covers which file formats to supply, how to prepare logo artwork so it still reads at a few pixels wide, and how to confirm the browser is actually showing it.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My Site</title>
  <link rel="icon" href="/favicon.ico" sizes="any">
</head>
<body>
  ...
</body>
</html>

Terms You Need First

• Favicon: the small icon a browser shows in tabs, bookmarks, history and some address bars to identify a site.
• Raster image: an image stored as a grid of pixels, such as PNG or ICO. It has a fixed resolution and blurs or becomes blocky when scaled up.
• Vector image: an image described by geometric paths, such as SVG. It can scale without losing sharpness, which makes it a good master format for icon artwork.
• ICO: a container format that can hold several raster sizes in one file. It is the long-standing default favicon format.
• viewBox: the coordinate system declared in an SVG file. A square viewBox keeps a vector favicon from being stretched or cropped unexpectedly.
• Head section: the part of an HTML document between the opening and closing head tags, where metadata such as the title and icon links belong.

Where the Favicon Tag Goes

The favicon link belongs in the head of every HTML page that should display the icon, not in the body. If your site uses a shared template, layout file or header include, add the tag there once so every page inherits it. Many browsers also request a file named favicon.ico from the root of the site even when no tag is present, so placing a favicon.ico at the site root is a useful fallback. Treat that root request as browser behavior to rely on cautiously, not as a substitute for an explicit link tag.

Step-by-Step: Adding a Favicon

• 1. Prepare a square icon from your logo mark (see the artwork section below).
• 2. Export the formats you plan to support, for example an ICO file, an SVG file and a PNG for Apple devices.
• 3. Upload the files to your site, typically the root folder or a dedicated icons folder.
• 4. Add the matching link tags inside the head of your HTML template.
• 5. Check that each href path points to the real file location. A leading slash means the path starts at the site root; no slash means it is relative to the current page.
• 6. Deploy, then verify the icon in a browser using the checks described later in this guide.

A Fuller Favicon HTML Code Example

A single ICO link works, but a small set of tags covers modern browsers, high-density screens and mobile home-screen shortcuts more reliably. The example below is a common modern pattern. Adjust file names and paths to match your project.

<head>
  <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">
</head>

Tag | Purpose | Status

rel="icon" with an ICO file | Broad fallback for browser tabs and bookmarks | Widely supported; the sizes="any" attribute helps browsers prefer the SVG when they can use it

rel="icon" with type="image/svg+xml" | Sharp, scalable icon for browsers that support SVG favicons | Support varies by browser and version; confirm against current browser documentation

rel="apple-touch-icon" | Icon used when an Apple device saves the site to the home screen | Apple documents this tag; a 180 by 180 pixel PNG is the commonly cited size

rel="manifest" | Points to a web app manifest that can list larger icons for Android and installable web apps | Only needed if you want home-screen or app-style icons beyond the browser tab

The type attribute tells the browser the file's media type before it downloads it. The sizes attribute describes the pixel dimensions the file provides. Neither changes the image itself; they help the browser choose among multiple icons. If you list several icons, keep the tags accurate, because a wrong type or size can cause a browser to skip an otherwise valid file.

Can You Set a Favicon With CSS?

No. A favicon is document metadata declared in HTML, not a visual style, so CSS has no property that sets it. Searches for favicon CSS or favicon ICO CSS usually come from confusion between the two layers. CSS can, however, appear inside an SVG favicon file itself, which is how a single SVG can switch colors for light and dark browser themes.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) {
      path { fill: #ffffff; }
    }
  </style>
  <path d="M4 4h24v24H4z"/>
</svg>

The xmlns value in that snippet is the standard SVG namespace identifier required inside SVG files, not a page to visit. The path shown is a placeholder square; replace it with your own simplified logo geometry.

Preparing Logo Artwork for a Favicon

The HTML is the easy part. The design decision that determines whether a favicon works is symbol selection: choosing which part of a logo can survive being reduced to a tiny square. A full logo with a wordmark, tagline and fine detail almost never reads at tab size. The following are design recommendations rather than technical requirements.

• Pick the most distinctive single element: a monogram, initial, symbol or simplified mark, rather than the full lockup.
• Work on a square artboard so the icon fills the space without awkward cropping.
• Simplify paths: remove thin strokes, small gaps and fine textures that disappear or turn to noise when scaled down.
• Convert any letterforms to outlined paths so the icon does not depend on a font being installed when exported.
• Use strong contrast and a limited palette, and check the mark against both light and dark tab backgrounds.
• Preview the artwork at actual favicon size during design, not only zoomed in, and adjust shapes to align with the pixel grid where the raster exports need crispness.
• Keep the vector source as your master file and export ICO and PNG versions from it.

Two cautions apply when sourcing artwork. First, a file extension is not proof of content: a file named with an SVG extension may contain an embedded raster image rather than editable paths, so open it in a vector editor and inspect the actual objects. Second, having a logo file does not grant permission to use it; confirm that you or your client hold the rights to adapt the mark into a favicon.

How to Verify the Favicon Works

• Open the site in a browser and look at the tab. If no icon appears, open the browser's developer tools and check the Network panel for the icon request and its status.
• A not-found status means the href path does not match the file location; correct the path or move the file.
• View the page source and confirm the link tags are inside the head and appear on every page, not just the home page.
• Open the icon file's path directly in the browser to confirm the server delivers it.
• Test in more than one browser, since support for SVG favicons and dark-mode styling differs.
• On a phone, add the site to the home screen to confirm the touch icon is used.

If the Old Icon Keeps Showing

Browsers cache favicons aggressively, so a correct change may not appear immediately. Try a hard refresh, a private browsing window or a different browser. If you need returning visitors to pick up a new icon, rename the file or add a version query string to the href, for example icon.svg?v=2, so the browser treats it as a new resource.

Gaps in This Guide

No project-specific evidence was supplied, so this guide does not state exact browser version support, a definitive list of required icon sizes or platform-specific behavior beyond widely documented conventions. Browser and operating system requirements change over time; check current official documentation for each platform you target before finalizing your icon set.