logoredraws.com

Add a favicon to a website with HTML

How to add a favicon with HTML: the link tags to place in the head, when to use SVG, PNG or ICO, why CSS can't set a favicon, and how to prepare a vector logo for it.

Published

Contents
  1. The direct answer: the favicon line of HTML
  2. Choosing a format: SVG, PNG or ICO
  3. Using PNG files at specific sizes
  4. Can CSS set or change a favicon?
  5. Changing an existing favicon
  6. Why SVG suits favicons made from vector logos
  7. Preparing a vector logo for favicon use
  8. Check that the SVG is really vector artwork
  9. Rights to the logo you use
  10. Quick checklist

A favicon is the small icon a browser shows in tabs, bookmarks, history lists and some search and sharing interfaces. You add one with HTML by placing a link element with rel="icon" inside the head of your page and pointing its href at the icon file. Everything else, including which formats to supply, how to prepare a logo for very small sizes and how to change the icon later, builds on that one line.

The direct answer: the favicon line of HTML

Put a link element in the head of every page that should show the icon. The rel attribute tells the browser the file is an icon, href gives its location relative to the page or site root, and type states the file format so the browser can skip formats it does not support.

<!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>

The HTML5 form is simply rel="icon". The older rel="shortcut icon" value still appears in many templates and is still recognized, but the word shortcut is not required. If a page has no icon link at all, many browsers fall back to requesting a file named favicon.ico from the root of the site, which is why a root-level favicon.ico is a common safety net.

Choosing a format: SVG, PNG or ICO

The format you choose determines how the icon scales and which browsers display it. Because the source of most favicons is a logo, the distinction between true vector artwork and pixel-based images matters here.

Format | What it is | Typical HTML | Practical notes
SVG | Vector artwork described as paths and shapes | <link rel="icon" href="/favicon.svg" type="image/svg+xml"> | Stays sharp at any size and on high-density screens; one file covers all sizes; browser support has historically been less complete than for PNG or ICO, so pair it with a fallback
PNG | Raster image made of pixels | <link rel="icon" href="/favicon-32.png" type="image/png" sizes="32x32"> | Widely supported; each file is fixed at its pixel dimensions, so you may supply more than one size
ICO | Container that can hold several raster images at different sizes | <link rel="icon" href="/favicon.ico" sizes="any"> | The longest-supported favicon format; useful as a fallback and for the root-level default request

A common, compact setup combines an SVG for browsers that support it with an ICO or PNG fallback, plus an Apple touch icon for when a visitor saves the site to an iPhone or iPad home screen.

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

Marking the ICO with sizes="any" is a widely used technique to keep browsers that understand SVG from choosing the ICO instead. The Apple touch icon is a square PNG, commonly prepared at 180 by 180 pixels. No browser-by-browser support figures were included in the material behind this article, so check current compatibility data before relying on SVG alone.

Using PNG files at specific sizes

If you deliver PNG favicons, the sizes attribute tells the browser the pixel dimensions of each file so it can pick the most suitable one. Small tab icons are commonly supplied at 16 by 16 and 32 by 32 pixels.

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">

Can CSS set or change a favicon?

No. There is no CSS property for a favicon. The icon is declared in HTML through the link element, and CSS has no way to replace it. If you need the icon to change while a page is open, for example to show a notification state, that is done with JavaScript by updating the href of the existing icon link. Inside an SVG favicon, however, CSS can be used within the SVG file itself, as described below.

Changing an existing favicon

  • Replace the file at the same location, or upload a new file and update the href in the head of every page or in your shared template.
  • Expect caching: browsers cache favicons aggressively, so the old icon can linger after you change it.
  • Force a fresh request by adding a version string to the href, such as favicon.svg?v=2, and changing it whenever the icon changes.
  • Check that no older icon link remains elsewhere in the head; when several icon links apply, the browser chooses among them and may not pick the one you expect.

Why SVG suits favicons made from vector logos

An SVG favicon is drawn from vector paths, so a single file renders crisply in a small browser tab and on high-resolution displays without exporting multiple sizes. Because an SVG can contain its own style rules, it can also respond to the prefers-color-scheme media query, letting the icon switch colors when the browser or operating system is in dark mode. That adaptation works only in browsers that render SVG favicons; fallback PNG or ICO files remain static.

Preparing a vector logo for favicon use

Favicons are displayed far smaller than a logo normally is, so the artwork usually needs deliberate preparation rather than a direct export of the full logo.

  • Use a simplified mark: a symbol, monogram or single initial reads better at tab size than a full wordmark with fine detail.
  • Work on a square canvas: set a square viewBox so the icon is not distorted or padded unevenly.
  • Convert text to outlines: a favicon should not depend on a font being installed, so live type should become paths.
  • Check contrast against both light and dark browser themes, or use a color-scheme media query inside the SVG.
  • Keep the file lean: remove hidden layers, editor metadata and unused definitions so the icon loads quickly.
  • Preview the result at actual tab size before publishing; detail that looks fine enlarged often disappears.

Check that the SVG is really vector artwork

A file ending in .svg is not automatically made of editable vector paths. An SVG can wrap an embedded raster image, in which case it behaves like a PNG inside an SVG container: it will blur when scaled and cannot be cleanly edited or recolored. Open the file in a vector editor or inspect its markup. Path, shape and group elements indicate vector artwork; an image element carrying encoded pixel data indicates an embedded raster. Likewise, a raster preview of a logo, such as a thumbnail, is not a substitute for the vector source when you prepare favicon files.

Rights to the logo you use

Turning a logo into a favicon means resizing, simplifying and often recoloring it, which is modification. Being able to download a logo file does not by itself grant permission to alter the artwork, use its typeface or display a trademark on your site. For your own brand this is straightforward; for a client or third-party mark, confirm that the owner permits the adaptation and use before publishing.

Quick checklist

  • Add a link rel="icon" element inside the head of every page or shared template.
  • Provide an SVG with type="image/svg+xml" plus an ICO or PNG fallback.
  • Add an apple-touch-icon PNG if visitors may save the site to a home screen.
  • Confirm the SVG contains real vector paths, not an embedded raster image.
  • Use a version string in the href when you change the icon, to get past browser caching.
  • Verify you have permission to adapt and display the logo.