How to Set a Favicon: What CSS Can and Can't Do

The short answer is that you can't set a favicon with CSS. No stylesheet property assigns the icon a browser shows in tabs, bookmarks and history. The icon is declared in HTML, with link elements inside the page's head. If none are declared, browsers may request a default favicon file from the site. CSS has one narrow role. It can style the shapes inside an SVG favicon, for example by recoloring the icon when the visitor's system is in dark mode.

A favicon is the small identifying image a browser displays alongside a site's name in its own interface. When it's built from vector artwork, the icon is described by mathematical paths instead of a fixed grid of pixels. SVG (Scalable Vector Graphics) is the vector format browsers can use for favicons, so it can scale cleanly. Raster formats such as PNG and ICO store pixels at set dimensions.

Why a stylesheet can't assign the icon

CSS controls how a document's content is rendered inside the page area. The tab strip, bookmark list and history view belong to the browser's own interface, which page styles don't reach. The browser learns which icon to use by reading the document's markup, specifically link elements with a rel value of icon or a related value. So any approach that tries to place the favicon with a background image, a pseudo-element or a custom property won't affect the tab.

Setting the favicon in HTML, step by step

• 1. Prepare the icon files from your logo artwork, as described in the sections below.
• 2. Put the files where your site serves static assets, and note their paths.
• 3. Add link elements to the head of every page, or to the shared template that generates the head.
• 4. Publish the change, then verify it using the checks at the end of this guide.

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

In this example, the ICO file is a raster fallback for browsers that don't use SVG icons, and the SVG file is the scalable version. The apple-touch-icon line supplies a PNG that Apple devices use when someone saves the site to a home screen. Replace the file names with your actual paths. When several icons are declared, each browser picks the one it prefers. That selection behavior differs between browsers and versions, so test on the browsers your audience actually uses.

Where CSS does help: an adaptive SVG favicon

An SVG file can contain its own style element. Rules in that element apply only to the shapes inside the icon. That makes it possible to use a prefers-color-scheme media query, which detects whether the visitor's system or browser is set to a light or dark theme. You can use it to swap fill colors so the mark stays visible against either background. These rules go inside the favicon file itself. A rule in your site's stylesheet won't change the favicon.

<style>
  path { fill: #1a1a1a; }
  @media (prefers-color-scheme: dark) {
    path { fill: #ffffff; }
  }
</style>

The colors above are placeholders. Use values from your brand palette that you've tested against both light and dark tab backgrounds. The media query reports the user's theme preference. It doesn't report the actual color of a given browser's tab bar, so check the result visually. Browser support for SVG favicons, and for media queries inside them, varies and has changed over time. The material for this guide doesn't confirm the current state of support. Check up-to-date compatibility information and keep the raster fallback in place.

Choosing the symbol from your logo

A favicon is shown at a very small size, so a full logo lockup rarely works. A lockup is the fixed arrangement of a symbol with a wordmark, and the wordmark is the logo's name set in type. A more legible choice is usually the logo's symbol, a monogram, or a single distinctive letterform taken from the wordmark. The goal is a shape people can recognize by its silhouette alone.

• Pick the element that people already associate with the brand, not a new mark invented only for the icon.
• Simplify the paths: remove fine detail, hairline strokes and small counters (the enclosed spaces inside letters such as o or e) that will fill in at small sizes.
• Convert strokes to filled shapes so line weights render predictably.
• Outline any type, meaning convert the letters to vector paths, so the icon doesn't depend on fonts installed on the viewer's device.
• Fit the mark to a square artboard and decide how much padding it needs to look balanced next to other sites' icons.
• Check that the mark still reads in one color, which is also useful if you create a dark-mode variant.

Preparing the artwork files

Start from the master vector logo, not from a screenshot or a previously exported image. For the SVG favicon, export a self-contained file. It should have a square viewBox, which is the coordinate area that defines the icon's visible frame. It shouldn't embed raster images or reference external files, and it should keep only the metadata it needs. For the raster fallbacks, export directly from the vector source at each size you need. Then review the smallest version at its actual pixel size. At that scale, nudging shapes onto the pixel grid by hand often improves clarity. This is a design recommendation, not a documented requirement.

A file extension alone doesn't tell you what's inside. An .svg file can wrap an embedded bitmap, which means it isn't true vector artwork and won't scale cleanly. Open the file in a vector editor or a text editor to confirm it contains paths. Also, having a logo file doesn't by itself mean you're allowed to reuse it. Confirm usage rights with the logo's owner before publishing it as a favicon.

Verifying the result

• Inspect the published page's head and confirm the link elements are present on every template that needs them.
• Open each icon file path directly in the browser to confirm it loads rather than returning an error.
• Use the browser's developer tools network panel to see which icon file the browser actually requested.
• Reload in a private window or after clearing the cache, because browsers cache favicons persistently and may keep showing an old icon.
• Switch your system between light and dark themes to check the SVG variant and its color changes.
• Check bookmarks and, on mobile devices, the saved home-screen icon, since these may use a different file than the tab.

Gaps to confirm before finalizing

The material for this guide doesn't include confirmed specifications for required icon sizes, platform-specific icon requirements or current browser behavior. Before you finalize your icon set, check the current documentation for the browsers and platforms you're targeting. Separate the formats and sizes a platform actually requires from those that are only common practice.