logoredraws.com

Set or Replace a Website Favicon in HTML

How to set or replace a favicon with HTML link elements, why CSS can't do it, how to prepare an SVG favicon from a vector logo, and how to get browsers to show the new icon.

Published

Contents
  1. The short answer
  2. The basic HTML5 markup
  3. Why CSS can't set a favicon
  4. Replacing an existing favicon
  5. Preparing an SVG favicon from a vector logo
  6. Which files to deliver
  7. Rights and gaps to check

The short answer

A favicon is set in HTML with a link element in the page head, using rel="icon" and an href that points to the icon file. To replace it, upload the new file, update or confirm the link element on every page template, and change the file name or add a version parameter so browsers stop showing the cached old icon. A CSS rule cannot set a favicon. If you have a vector logo, an SVG favicon is a practical primary option, with an ICO or PNG fallback for browsers and tools that don't use SVG icons.

The basic HTML5 markup

HTML5 dropped the need for the older rel="shortcut icon" value; rel="icon" is the standard form. The type attribute tells the browser the file format, and sizes describes raster dimensions. A common combined setup looks like this:

<head>
  <link rel="icon" href="favicon.ico" sizes="32x32">
  <link rel="icon" href="favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="apple-touch-icon.png">
</head>

Browsers that support SVG icons can pick the SVG; others fall back to the ICO. The apple-touch-icon entry covers the icon used when someone saves the site to an Apple device's home screen, which does not use the SVG favicon. Many browsers also request a file named favicon.ico from the site root even when no link element exists, so keeping a file there avoids stray errors and covers older software.

Why CSS can't set a favicon

Searches for setting a favicon with CSS usually come from expecting it to behave like a background image. It doesn't. The favicon is document metadata read from the head, not something rendered inside the page, so no CSS property controls it. Two things are possible instead: the SVG file itself can contain a style block (see the dark-mode note below), and JavaScript can change a link element's href at runtime, for example to show a notification badge. Neither is a CSS replacement for the link element.

Replacing an existing favicon

  • Find where the current icon is declared: theme header templates, a layout file, a CMS site-identity setting, or a web app manifest.
  • Remove or update duplicate link elements; conflicting declarations make it unpredictable which icon a browser chooses.
  • Upload the new files and confirm they load directly in a browser tab.
  • Change the reference so caches treat it as new, either with a new file name or a query parameter such as favicon.svg?v=2.
  • Update the manifest's icon entries if the site has one, since installed web apps read icons from there.
  • Check in a private window and on a second browser; favicon caches are often kept separately from the normal page cache, so a regular refresh may keep showing the old icon.

If a CMS or hosting platform injects its own favicon, setting it through the platform's interface is usually more reliable than adding a manual link element, because the platform's tag may override or duplicate yours.

A favicon is displayed very small, so a full logo with a wordmark, tagline or fine strokes rarely reads well. Most brands use a simplified mark: the symbol alone, a monogram, or a single letterform, with thick shapes and strong contrast. Drawing it on a square artboard with a little padding prevents the browser from cropping or squashing it.

Check what is actually inside the SVG before using it. A file ending in .svg is not proof of vector artwork; some SVGs only wrap an embedded PNG or JPEG in an image element, which brings back raster blurriness and adds file weight. Open it in a vector editor or a text editor and confirm the artwork is made of path and shape elements. Text should be converted to outlines, because a favicon cannot rely on the visitor having the logo's font installed. Removing editor metadata, hidden layers and unused definitions keeps the file small.

An SVG favicon can adapt to light and dark browser themes with a media query inside the file itself:

<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="..."/>
</svg>

The xmlns value in that snippet is the required SVG namespace identifier, not a link to visit. The path data is a placeholder for your own logo mark.

Which files to deliver

File | Purpose | Source
favicon.svg | Primary icon for browsers that support SVG favicons | Simplified vector mark, outlined, no embedded raster
favicon.ico | Fallback and root-level default request | Exported from the same mark at small sizes such as 16 and 32 pixels
apple-touch-icon.png | Home-screen icon on Apple devices | Raster export, commonly 180 by 180 pixels, with a solid background
Manifest icons (PNG) | Installed web app and Android home-screen icons | Raster exports at the sizes the manifest declares

Exporting all raster versions from the vector master keeps them consistent and means a future logo change only needs one source file updated.

Rights and gaps to check

If the logo isn't your own, being able to download it doesn't mean you can simplify, recolor or use it as a favicon. Modifying artwork and using a trademark or licensed font each need their own permission.

No source evidence was supplied for exact browser version support for SVG favicons or for each platform's current icon size requirements. Support has changed over time, so check current browser compatibility data and your platform's documentation before dropping the ICO or PNG fallbacks.