SVG favicon: how to use an SVG as a favicon

Yes, a favicon can be an SVG. Add <link rel="icon" href="/icon.svg" type="image/svg+xml"> to the page’s head and browsers that support SVG favicons use it, sharp at every size from one small file. The current versions of Chrome, Edge, Firefox and Safari all do, according to the browser support tables at caniuse.com. Safari was the last of them to add it, and older browsers ignore the SVG, so keep a favicon.ico beside it as the fallback.

The markup

Three lines in the <head> cover browsers old and new:

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

Line	Used by	File
First	Browsers that cannot use an SVG favicon	An .ico holding small bitmap sizes
Second	Browsers that can	The SVG
Third	iPhones and iPads, for the home screen icon	A square PNG, generally 180 by 180 pixels

How a browser chooses is laid down in the HTML standard. When a page offers several icons, the browser picks the most suitable one from the type, sizes and media attributes. If two are equally suitable it takes the one that comes last in the page, and if the one it picked turns out to be in a format it cannot use, it tries the next. So the SVG goes after the .ico, and type="image/svg+xml" tells a browser without SVG support that this one is not for it.

The sizes attribute on the first line states which bitmap size the .ico holds. For an SVG the standard’s keyword is sizes="any", meaning a scalable icon. It can be added to the second line but is not required.

Browsers also look for /favicon.ico at the root of the site by themselves when a page names no icon, so putting an .ico there is worth doing whatever the markup says.

The SVG file

A favicon is an ordinary standalone SVG. This is a complete file:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <rect width="32" height="32" rx="6" fill="#0b6e4f"/>
  <circle cx="16" cy="16" r="8" fill="#ffffff"/>
</svg>

It draws a green tile with rounded corners and a white disc in the middle. What makes a good one:

• A square viewBox. Tabs show icons in a square. Any numbers will do, since the browser scales the drawing.
• The xmlns attribute. The file is fetched on its own, not typed into a page, so it needs xmlns="http://www.w3.org/2000/svg".
• Bold shapes. In a tab the icon is about 16 pixels across. One or two solid shapes survive that. Fine lines and words do not.
• Nothing fetched from outside. A favicon is drawn as a picture, and pictures do not load linked images or web fonts or run scripts. Keep everything in the file, and convert any lettering to paths.
• No animation. Chrome and Edge draw an SVG favicon as a still image, so animation inside the file does not play there.

A dark mode favicon

A dark icon disappears on a dark tab. An SVG can carry its own answer, because a <style> block inside the file can hold a media query. Another complete file:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    circle { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) {
      circle { fill: #f5f5f5; }
    }
  </style>
  <circle cx="16" cy="16" r="14"/>
</svg>

The disc is near black when the browser reports a light colour scheme and near white when it reports a dark one. The rule sits in the file because CSS on the page cannot reach into a favicon.

Two cautions. Not every browser that shows SVG favicons follows this query for them, and some only notice a change of theme when the page is reloaded. And the .ico and PNG fallbacks cannot change at all. The safe design is an icon that is readable on both light and dark tabs without help, such as a coloured tile behind the mark, with the media query as a refinement.

The fallback files

favicon.ico. An .ico file holds the same icon at several fixed sizes. SVG to ICO draws an SVG at 16, 32 and 48 pixels, or more, and packs them into one file. Keep sizes="32x32" on this line even when the .ico holds more sizes: Chrome treats an .ico that claims every size it wants as better than the SVG, and then never uses the SVG.

apple-touch-icon.png. Apple’s devices use this PNG when a page is added to the home screen. Give it a solid background: a home screen icon is not shown with transparency. SVG to PNG makes one at any pixel size.

Icons in a web app manifest. A site that can be installed as an app lists PNG icons in its manifest file, commonly at 192 and 512 pixels. These are separate from the favicon.

Serving the file

The server has to send the SVG with the content type image/svg+xml. Chrome and Firefox will not use an SVG favicon sent as anything else. Most web servers and hosts do this for the .svg ending without being asked. To check, open the icon’s address in the browser: it should be drawn, not shown as code or downloaded.

In browsers that take SVG favicons, the icon can also be written straight into the link as a data URI, with no file at all. SVG to Base64 produces the data URI to paste into href.

Common problems

What you see	Cause	Fix
The old icon still shows	Browsers cache favicons for a long time	Reload the page without the cache, or add a query such as ?v=2 to the href
The .ico shows where the SVG was expected	The SVG link comes first or has no type; the .ico link has sizes="any", no sizes, or lists both 16 and 32; or the browser is an older one	Put the SVG link after the .ico link, with type="image/svg+xml"
No icon at all	Wrong path, or the file is served with the wrong content type	Open the icon’s address directly and check that it is drawn
The icon is blank in the tab	The SVG has no xmlns, or depends on a linked image or font	Add xmlns. Keep everything inside the file
The icon is cropped or tiny	The viewBox does not fit the artwork	Trim the empty space with crop SVG. If the artwork is not square, the icon is centred with empty margins
It is unreadable in the tab	Too much detail for 16 pixels	Simplify to one bold shape
It vanishes on dark tabs	A dark icon with a transparent background	Add a light tile behind it, or a dark mode rule in the file
No icon on an iPhone home screen	No apple-touch-icon	Add the PNG and its link

Questions

Is the .ico still needed? For complete coverage, yes. It is what older browsers use, and other programs that fetch a site’s icon often ask for /favicon.ico by name.

What size should an SVG favicon be? It has no fixed size. Use a square viewBox such as 0 0 32 32 and let the browser scale it.

Can the favicon use the page’s CSS variables or fonts? No. It is loaded as a separate image, so nothing from the page reaches it.