logoredraws.com

How to Add a Favicon to Your Website's HTML

Where to put the favicon link in HTML, which file formats to use, how to prepare a vector logo as an SVG favicon with a fallback, and how to check that it works.

Published

Contents
  1. The short answer: a link element inside the head
  2. Terms you need to know
  3. Step by step: from logo artwork to working favicon
  4. A minimal SVG favicon
  5. Optional extras
  6. How to verify the favicon works
  7. Common problems
  8. A caveat about logo files
  9. What this guide could not confirm

To add a favicon, place a link element with rel="icon" inside the head section of your HTML document. Point its href attribute at the icon file. This is the standard method described in the HTML specification and taught in most beginner tutorials. A favicon is the small image browsers show in tabs, bookmarks and history lists. The link element is what tells the browser which file to use.

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

Where to put the favicon code: it belongs in the head, never in the body. Its exact position within the head does not matter. Where to put the files: store them where the href paths point. A common habit is to place them in the site's root folder. Many browsers also request a file named favicon.ico from the root automatically, even if no link element exists, so a root-level ICO file acts as a safety net.

Terms you need to know

  • Vector graphic: an image defined by mathematical paths, such as lines, curves and fills, rather than a grid of pixels. It can be scaled to any size without blurring.
  • SVG (Scalable Vector Graphics): a text-based vector format that browsers can render directly. Many browsers accept it as a favicon, but support is not universal.
  • ICO: a legacy icon container format that can hold several raster (pixel-based) versions of the same icon at different sizes. Browsers have supported it for a long time.
  • Raster or bitmap: an image made of pixels, such as PNG or ICO content. It can look blurry or jagged when scaled beyond the size it was drawn for.
  • Fallback: a second file offered for browsers that cannot use the preferred format.

Step by step: from logo artwork to working favicon

  • 1. Start from the vector master of the logo, not a screenshot or an exported JPEG.
  • 2. Simplify it for very small display. A full logo with a wordmark usually becomes unreadable at tab size. A symbol, monogram or single initial tends to work better. This is a design recommendation, not a technical requirement.
  • 3. Fit the mark into a square artboard with its viewBox set to a square. Leave a little breathing room so the shape does not touch the edges.
  • 4. Clean the paths. Convert text to outlines so the icon does not depend on installed fonts. Expand strokes if your tool supports it, merge overlapping shapes, and remove hidden layers, editor metadata and embedded raster images.
  • 5. Export a plain SVG and save it as favicon.svg.
  • 6. Export a raster fallback and package it as favicon.ico. Many design tools and dedicated converters can produce multi-size ICO files.
  • 7. Upload both files and add the link elements shown above to the head of every page, or to the shared template or layout file if your site uses one.
  • 8. Verify the result as described below.

A minimal SVG favicon

A favicon SVG should be as lean as possible. The example below is an illustration of structure, not a real logo. It also shows an optional technique: a CSS media query inside the SVG that switches colors when the user's system is in dark mode. This only works in browsers that render SVG favicons.

<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="M6 6h20v20H6z"/>
</svg>

The xmlns value in the root element is a required namespace identifier that marks the file as SVG. It is not a link the browser visits.

Optional extras

Some platforms look for their own icon declarations. Apple devices, for example, use a link element with rel="apple-touch-icon" pointing to a PNG when someone saves a site to the home screen. Add these only if you need that behavior. The basic favicon works without them. No platform-specific size requirements were supplied for this guide, so check each platform's current documentation before exporting dedicated sizes.

<link rel="apple-touch-icon" href="apple-touch-icon.png">

How to verify the favicon works

  • Open the page and look at the browser tab.
  • If the old icon or no icon appears, do a hard refresh or open the page in a private window. Browsers cache favicons aggressively.
  • Open the developer tools, go to the Network panel, reload, and confirm the icon files load without a not-found error.
  • Open the icon file's path directly in the browser to confirm it exists where the href says it does.
  • Test in more than one browser. SVG favicon support varies, and the ICO fallback should appear where SVG is not used.
  • If you used the dark-mode technique, switch your system theme and check that the icon stays visible against the tab background.

Common problems

  • Wrong path: the href is relative to the current page unless it starts with a slash. Pages in subfolders may fail to find the icon.
  • Link placed in the body: move it into the head.
  • Icon appears on one page only: the link was added to a single page instead of the shared template.
  • Blurry or illegible icon: the artwork is too detailed for small display. Simplify the mark rather than adding more detail.
  • SVG not showing: the browser may not support SVG favicons, or the file may contain unsupported content such as external fonts or embedded scripts. Rely on the ICO fallback and clean the SVG.

A caveat about logo files

A file ending in .svg is not proof that it contains clean vector paths. SVG files can wrap embedded bitmap images, so inspect the file in a vector editor before using it. A file extension also says nothing about whether you have permission to use a logo. If the artwork is not your own, confirm usage rights with the brand owner before publishing it as your site's icon.

What this guide could not confirm

No verified data was supplied on current browser support tables, required pixel sizes for each platform, or specific tool versions. The guidance above relies on general, widely documented HTML behavior. Check current browser and platform documentation before you finalize exact sizes or drop the ICO fallback.