Use an SVG file as an HTML favicon

Yes, an SVG file can serve as a website favicon. You reference it from the document head with a link element whose rel value is icon and whose type is image/svg+xml. Browsers that support SVG favicons scale the vector artwork to whatever size the tab, bookmark list or history view needs, so a single file can replace several fixed-size bitmaps. Browsers that don't support it fall back to other icons you declare, which is why most sites keep at least one raster fallback.

The basic HTML

Place the SVG on your server and add this line inside the head element of each page. The href value is the path to your file.

<link rel="icon" href="favicon.svg" type="image/svg+xml">

The type attribute tells the browser the file is SVG before downloading it, so browsers that can't render SVG icons can skip it. The server should also deliver the file with the image/svg+xml content type. If it sends a generic type instead, some browsers may refuse to display the icon.

Keeping fallbacks alongside the SVG

Browser support for SVG favicons has historically been uneven, with Safari the main exception for a long period. The materials behind this article include no current compatibility data or version numbers. Check an up-to-date browser support table before deciding whether you still need older formats. Two other surfaces don't use the SVG favicon at all. Older browsers request a favicon.ico file by default. Apple devices use a separate PNG touch icon when a page is saved to the home screen. A common combined setup looks like this:

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

The sizes="any" value on the ICO line is a widely used pattern meant to stop some browsers from choosing the ICO over the SVG. Browsers choose among multiple icon declarations differently. After deploying, test the result in the browsers your audience actually uses rather than assuming one order works everywhere.

Putting SVG code directly into the favicon tag

If you have SVG markup but no separate file, you can embed that code in the href attribute as a data URI. It begins with the data:image/svg+xml prefix, followed by the URL-encoded SVG markup. This saves a request and works for quick prototypes. It has drawbacks, though. The markup must be encoded correctly, especially characters such as the hash sign in color values. It also adds weight to every HTML page instead of being cached once as a separate file. And the embedded SVG still needs its root namespace declaration. For a production site, a standalone file is usually easier to maintain.

Preparing vector logo artwork for favicon use

A favicon is often shown at about 16 to 32 pixels across. A full logo that works on a letterhead rarely reads well at that size. Most brands use a simplified mark instead, such as a symbol, monogram or single letterform. These preparation steps matter most:

• Use a square viewBox so the icon isn't squeezed or letterboxed in square slots.
• Convert live text to outlines. An SVG loaded as an image can't reach web fonts or the visitor's installed fonts, so unconverted type may render in a substitute font.
• Remove references to external files, scripts and linked stylesheets. Browsers block external resources when an SVG is used as an image.
• Strip editor metadata, hidden layers and unused definitions to keep the file small.
• Check the artwork at actual favicon size. Thin strokes, fine gaps and small details often blur or disappear.

Checking that the file is truly vector

A .svg extension doesn't guarantee vector artwork. Some SVG files are just wrappers around an embedded PNG or JPEG, which you can spot as an image element holding encoded bitmap data. That kind of file won't scale cleanly, and it misses the main reason to use an SVG favicon. Open the file in a vector editor or a text editor to confirm the artwork is built from path, shape and similar elements. The same applies to raster previews that come with logo packages. A preview thumbnail tells you nothing about whether the source file contains editable paths.

Light and dark browser themes

Because an SVG can carry its own style rules, it can respond to the visitor's color-scheme preference. A favicon that disappears against a dark tab bar can switch colors through a prefers-color-scheme media query inside the file:

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

This only applies where the SVG favicon itself is shown. The ICO and touch-icon fallbacks are static images, so choose colors for them that hold up on both light and dark backgrounds.

Rights to the logo artwork

Being able to download a logo file doesn't mean you may modify it or use it as a favicon. Simplifying a logo, recoloring it or outlining its type are all modifications. Displaying it as a site icon can also raise trademark questions, especially if it suggests an affiliation. Fonts used in the original artwork may have their own license terms. If the logo isn't yours, confirm that its usage terms cover editing and displaying it in this way.

What this overview does not cover

The source materials for this article contain no browser version numbers, support percentages, file-size benchmarks or test results. The guidance above relies on general, documented behavior of HTML and SVG. Before you remove raster fallbacks, confirm current support in a maintained compatibility reference and test the icon in your target browsers.