How to use an SVG favicon

Use a square SVG with a viewBox, declare it with rel="icon" and type="image/svg+xml", and keep a small PNG fallback. Add a separate 180 by 180 PNG for Apple touch icons. Test the artwork at 16 pixels before publishing it.

SVG favicon HTML setup

Place the icon files at stable URLs and add these elements inside the document <head>. The PNG covers clients that do not use SVG favicons. The Apple touch icon is for an iPhone or iPad Home Screen shortcut.

<link rel="icon" href="/favicon-32x32.png"
      sizes="32x32" type="image/png">
<link rel="icon" href="/favicon.svg"
      sizes="any" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"
      sizes="180x180">
<link rel="manifest" href="/site.webmanifest">

The HTML Standard lets a browser choose among icon links using their media, type, and sizes. If several choices are equally suitable, it uses the last one. Keeping the SVG after the PNG gives a capable browser a scalable option while retaining a raster fallback.

Do browsers support SVG favicons?

Current Chrome, Edge, Firefox, and Safari 26 or later support SVG favicons. Older Safari releases, Internet Explorer, Opera Mini, and some embedded browsers do not. The exact mix changes over time, so check the current SVG favicon support table before removing a fallback.

SVG support in a browser tab does not mean the same file will work as an iOS Home Screen icon or an installed app icon. Those surfaces have their own file and size requirements.

What size should an SVG favicon be?

The SVG itself does not need a fixed pixel size. Give it a square viewBox, such as 0 0 32 32 or 0 0 64 64, and make sure its shapes remain readable when the browser draws them at 16 or 32 pixels.

Apple's Safari Web Content Guide specifies a PNG for apple-touch-icon and includes a 180 by 180 option. A normal SVG favicon should not be treated as a replacement for that file.

Design an icon that survives 16 pixels

• Use a simple silhouette with one clear focal shape.
• Leave a little space between the artwork and the viewBox edge.
• Avoid small words, hairline strokes, and subtle gradients.
• Check the icon on both light and dark browser chrome.
• Export PNG fallbacks from the same approved source artwork.

Open the file in the SVG viewer to inspect its viewBox and dimensions. If the artwork has too much empty space, use the SVG viewBox editor. Use the SVG to PNG converter for quick raster fallbacks.

Can an SVG favicon support dark mode?

An SVG file can include a prefers-color-scheme media query and use CSS inside its own markup. This can work for a browser favicon, but cached icons and browser-specific behavior make testing necessary.

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

Keep a static version if the brand mark already has enough contrast in both themes. PDFSVG's safe preview removes embedded style elements, so preserve your original file if its dark-mode behavior depends on internal CSS.

Why is my SVG favicon not showing?

1. Open the favicon URL directly and confirm that it returns the SVG, not an HTML error page.
2. Check that the link uses rel="icon" and the path resolves from the deployed site.
3. Serve the SVG with the image/svg+xml MIME type.
4. Confirm that the file has an SVG root, a square viewBox, and visible artwork.
5. Clear the browser favicon cache or test with a temporary new filename.
6. Inspect Content Security Policy and cross-origin rules if the icon lives on another origin.