How to Add a Favicon in HTML

To add a favicon to a website, place one or more link elements inside the head section of each HTML page. Each link points the browser to an icon file. A favicon is the small icon that browsers show in tabs, bookmarks, history lists and some search interfaces. The HTML is short. Most of the work is preparing logo artwork that still reads clearly when it is rendered only a few pixels wide.

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

Two terms matter here. A vector file describes shapes as mathematical paths, which are lines and curves defined by anchor points, so it can scale without losing sharpness. SVG (Scalable Vector Graphics) is the vector format browsers can use directly as a favicon. A raster file, such as PNG or ICO, stores a fixed grid of pixels. ICO is a container format that can hold several raster sizes in one file. A typical favicon setup combines both kinds: an SVG for browsers that support it, and raster fallbacks for browsers and platforms that do not.

Before You Start

• Permission to use the logo. Having a file with an .svg or .ai extension does not prove you are allowed to reuse the mark. It also does not prove the file contains clean, editable vector paths.
• A vector master of the logo, or at least the symbol you plan to use, from the brand owner or the original designer.
• A vector editor that can edit paths, outline text and export SVG and PNG.
• Access to the site's HTML templates, or the theme or CMS setting that controls the head section.
• Access to upload files to the site's public root folder or another publicly served folder.

Choose the Right Symbol from the Logo

A full logo rarely works as a favicon. A wordmark, which is a logo made mainly of styled lettering, turns into an unreadable smudge at tab size. Taglines and fine detail disappear completely. Pick the part of the identity that can stand alone. Good candidates are an existing logo symbol, a monogram (one or two initials), or a simplified version of the mark. If the brand guidelines already define a small-size or app-icon version, use it rather than creating a new one.

• Prefer one bold shape over several small ones.
• Remove thin strokes, hairline details, gradients and small counters (the enclosed spaces inside letters such as "e" or "a") that will fill in at small sizes.
• Keep strong contrast between the symbol and its background, and check it on both light and dark browser themes.
• Make the symbol roughly square, because favicons are displayed in square slots.
• Treat any simplification as a brand decision. If the logo belongs to someone else, get the owner's approval before altering it.

Prepare the Vector Artwork

• Create a square artboard and place the symbol centered on it, with consistent padding so it does not touch the edges.
• Convert live text to outlines. This turns font characters into ordinary vector paths, so the icon no longer depends on the font being installed and renders the same everywhere.
• Expand strokes into filled shapes so that line weights stay predictable when the icon is scaled.
• Use a union or merge operation on overlapping shapes, and delete hidden, empty or stray objects.
• Reduce anchor points where curves allow it. Simpler paths produce smaller, cleaner SVG files.
• When preparing raster exports, check the artwork at actual pixel size. Nudge straight edges onto whole pixels where possible so they do not render blurry.
• Keep the original, unsimplified logo file separately and work on a copy.

Menu names and export options differ between vector applications and between versions of the same application. This guide does not verify any specific program's commands. Check the documentation for the software and version you use, especially for outlining text, expanding strokes and SVG export options.

Export the Favicon Files

File | Format | Purpose

icon.svg | SVG | Scalable favicon for browsers that support SVG icons

favicon.ico | ICO | Fallback for browsers and tools that look for a favicon at the site root

apple-touch-icon.png | PNG | Icon used when an Apple device user adds the site to the home screen

Manifest icons (optional) | PNG | Icons referenced by a web app manifest for installable sites

When exporting the SVG, keep a viewBox attribute so the icon scales correctly. Remove editor metadata, comments and unused definitions. Avoid embedding raster images or external font references. For the ICO and PNG files, export from the vector master at each pixel size you need, rather than enlarging a small image. Apple, browser makers and web app manifest tooling each publish their own recommended icon sizes. These recommendations change over time and differ by platform. Treat sizes you see in tutorials as recommendations rather than fixed requirements, and confirm them against current platform documentation before export.

An SVG favicon can include a CSS media query for the prefers-color-scheme setting, which lets the icon change color in dark mode. This is optional. Browsers that do not support SVG favicons will use the raster fallback instead, so make sure the fallback also works on dark backgrounds.

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

The xmlns value in the snippet above is the standard SVG namespace identifier that SVG files declare. It is not a link to visit. The path data is left as a placeholder. Replace it with the exported path from your artwork.

Add the Favicon Links to Your HTML

• Upload the exported files to the site, usually to the public root folder.
• Open the template or layout file that produces the head section for every page. On a CMS, use the theme's site icon setting if one exists, because a manual tag can conflict with it.
• Add the link elements shown at the top of this guide inside the head element, and adjust the paths if your files live in a subfolder.
• If the site uses a web app manifest, list its icons there and add a link to the manifest in the head.
• Deploy the change.

<link rel="manifest" href="/site.webmanifest">

{
  "icons": [
    { "src": "/icon-small.png", "type": "image/png", "sizes": "WIDTHxHEIGHT" },
    { "src": "/icon-large.png", "type": "image/png", "sizes": "WIDTHxHEIGHT" }
  ]
}

The manifest snippet is optional and is only relevant for sites intended to be installable as web apps. Replace WIDTHxHEIGHT with the actual pixel dimensions of each exported file, and match them to the sizes the target platforms currently document.

Confirm the Favicon Works

• Open each icon file's path directly in a browser. Each one should display the icon rather than an error page.
• Load the site in a fresh private window. Browsers cache favicons heavily, so an old icon in a normal window does not necessarily mean the change failed.
• View the page source and confirm the link elements appear inside the head on every page template, not just the home page.
• Use the browser's developer tools network panel to check that the icon requests succeed and return the expected file types.
• Compare the tab icon in light and dark browser themes, and at the zoom levels you expect visitors to use.
• Test in more than one browser, because support for SVG favicons and the order in which icon declarations are chosen differ between browsers.
• If the old icon persists, rename the files or add a version query string to the href, then redeploy.

Common Problems

• Icon looks blurry: export each raster size from the vector master and check pixel alignment instead of scaling one PNG.
• Icon is unreadable: the chosen element is too detailed. Switch to the logo symbol or a monogram.
• SVG shows in some browsers but not others: keep the ICO and PNG fallbacks in place.
• Text in the icon renders in the wrong typeface: the text was not converted to outlines before export.
• Icon disappears on dark tabs: add a contrasting background shape or a dark-mode color rule.

Evidence note: no subject-specific measurements, browser version data or application commands were supplied for this guide. The HTML structure above follows standard markup. Pixel sizes, platform support and software menu paths should be checked against current official documentation before you finalize your favicon files.