How to Add an SVG Favicon to HTML and Plan for Browser Support

The short answer

To use an SVG favicon, place the SVG file on your site and reference it in the document head with a link element whose rel is "icon" and whose type is "image/svg+xml". Browsers that support SVG icons will use it. Browsers that do not, Safari in particular, need a raster fallback, so the dependable approach is to ship the SVG together with a traditional ICO or PNG favicon and a separate PNG touch icon for Apple devices.

A favicon is the small icon a browser shows in tabs, bookmarks, history and similar interface spots. SVG (Scalable Vector Graphics) describes the icon with geometric paths instead of a fixed grid of pixels, so a single file can render sharply at any display size or pixel density.

The HTML to add

A common setup puts these lines inside the head element. Replace the file names with your own paths.

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

• favicon.ico: the raster fallback for browsers and tools that ignore SVG icons.
• icon.svg: the scalable icon that supporting browsers use. The type attribute tells the browser what format to expect.
• apple-touch-icon.png: the icon Apple devices use when a page is saved to the home screen. It is a separate PNG and is not replaced by the SVG.

Some implementation guides add a sizes value to the ICO link so that Chromium-based browsers choose the SVG rather than the ICO when both are listed. Browser selection logic between multiple icon links is not fully consistent, so check which file each target browser actually requests instead of assuming this order works everywhere.

Browser support, including Safari

Chromium-based browsers and Firefox broadly support SVG favicons. Safari has historically not displayed SVG favicons in tabs and relies on raster icons instead, which is the main reason a fallback is still necessary. Older browsers and some third-party tools that fetch favicons, such as feed readers or link-preview services, may also expect only ICO or PNG.

Gap in the supplied evidence: no confirmed version numbers, release dates or current support figures were provided. Browser behavior changes over time, so confirm current Safari and mobile-browser support in an up-to-date compatibility table before you decide to drop any fallback file.

What size should an SVG favicon be?

An SVG has no single required pixel size, because it scales. What matters is the viewBox, the attribute that defines the coordinate area of the artwork. Use a square viewBox so the icon is not letterboxed or stretched, and let the browser scale it to whatever size the interface needs.

The real constraint is legibility. A tab icon is shown very small, often around 16 pixels on standard displays, so test the design at that size. Raster fallbacks do need explicit pixel dimensions. The supplied evidence includes no official size requirements, so take sizes for ICO, PNG and touch icons from the current documentation of each platform you target.

Preparing the logo artwork

A full logo seldom works as a favicon unchanged. Fine detail, wordmarks and thin lines blur together at tab size. Usually the better choice is a simplified mark, such as a symbol, monogram or single letterform, derived from the main logo.

• Simplify the geometry. Remove small counters, hairline details and secondary elements that disappear at small sizes.
• Convert type to outlines. Live text in an SVG depends on fonts the visitor may not have, so turn letterforms into paths.
• Check stroke weights. Thin strokes can disappear when scaled down. Thicken them, or expand strokes into filled shapes for predictable rendering.
• Use a square artboard and a viewBox that matches it, with consistent padding around the mark.
• Remove editor metadata, hidden layers, unused definitions and comments that design applications often export.
• Avoid external dependencies. Do not link to outside images, fonts or stylesheets from the icon file.
• Check contrast against both light and dark browser interfaces, because the tab background varies.

A .svg extension does not prove a file is pure vector. SVG files can contain embedded raster images, which defeats the purpose of scalability and can make the file much larger. Open the file in a vector editor or text editor and confirm the artwork is made of paths and shapes. The extension also says nothing about whether you have permission to use or modify the logo. Confirm usage rights separately.

Optional: adapting the icon to dark mode

Because an SVG can contain a style element, it can include a prefers-color-scheme media query that changes fill colors when the operating system or browser uses a dark theme. This is a design option, not a requirement. The raster fallbacks cannot adapt this way, and support for media queries inside favicons should be tested in each target browser.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #111; }
    @media (prefers-color-scheme: dark) {
      path { fill: #fff; }
    }
  </style>
  <path d="..."/>
</svg>

The xmlns value in this snippet is the standard SVG namespace identifier that the format requires. It is not a link to visit. Replace the placeholder path data with your own artwork.

Verifying the result

• Load the page and look at the tab icon in each browser you support, including Safari.
• Open the browser developer tools, check the network panel, and confirm which favicon file was requested and that it loaded without errors.
• Confirm the server delivers the SVG with the image/svg+xml content type. A wrong type can stop the icon from displaying.
• Bypass the cache when you test changes. Browsers cache favicons aggressively, so a hard refresh, a private window or a renamed file may be needed to see the update.
• View the icon at actual size, not zoomed in, and check it on both light and dark browser themes.
• Save the page to a mobile home screen to confirm the touch icon appears.

Decision summary

Use an SVG favicon for crisp, scalable rendering in browsers that support it, but do not rely on it alone. Pair it with an ICO or PNG fallback and an Apple touch icon, prepare a simplified, outlined, path-only version of the logo for small sizes, and check the actual behavior in your target browsers, because the supplied evidence does not confirm current support details.