logoredraws.com

Check SVG favicon browser support and Safari compatibility

Where SVG favicons work, why Safari has been the exception, and how to set up fallbacks so your vector logo shows up as a tab icon in every browser.

Published

Contents
  1. The short answer
  2. What is being discussed
  3. Support at a glance
  4. Why Safari needs separate handling
  5. A fallback setup that covers Safari
  6. Preparing the vector artwork
  7. How to check compatibility yourself

The short answer

An SVG favicon is a vector icon file referenced from a page's head with a link element of type image/svg+xml. Chromium-based browsers and Firefox have supported this for some time. Safari has historically been the main exception: for a long period it ignored SVG favicons and used a raster icon instead. Recent Safari releases have been reported to add SVG favicon support, but this article had no confirmed release notes, version numbers or test results to cite. Check current documentation and test in the Safari versions your audience uses before relying on SVG alone.

In practice, the advice is the same either way. Serve an SVG favicon for browsers that render it, and always pair it with raster fallbacks so Safari and older browsers still show your logo.

What is being discussed

This is about the small icon shown in browser tabs, bookmarks and history, not the full logo file you deliver to clients. An SVG favicon is usually a simplified mark taken from the master vector logo, such as a monogram, symbol or cropped emblem. The aim is a crisp result at any pixel density from one file.

A file ending in .svg is not necessarily true vector artwork. An SVG can wrap an embedded PNG or JPEG, which gives you none of the benefits of scalable paths. Open the file in a vector editor or read its markup to confirm the icon is built from paths and shapes, not a single embedded image.

Support at a glance

Browser family | SVG favicon | Notes
Chromium-based (Chrome, Edge and similar) | Supported | Uses the SVG when it is declared with the correct type
Firefox | Supported | Long-standing support for SVG icons
Safari (macOS, iOS, iPadOS) | Historically unsupported; reportedly added in recent releases | Verify against current release notes and test directly; keep raster fallbacks
Older or legacy browsers | Generally unsupported | Rely on ICO or PNG

Gap: no dated compatibility data or version-by-version test results were available for this article. Treat the Safari row as a prompt to verify, not as a confirmed specification.

Why Safari needs separate handling

Safari uses several icon mechanisms that do not depend on SVG tab icons:

  • Tab and bookmark icons: Safari falls back to ICO or PNG icons when it does not use the SVG.
  • Home screen icons on iOS and iPadOS: these come from the apple-touch-icon link, which expects a PNG. An SVG favicon does not replace it.
  • Pinned tabs in older macOS Safari: these used a separate monochrome SVG declared with rel="mask-icon" and a color attribute. Newer versions have moved away from this, but it may still matter for older installs.

A fallback setup that covers Safari

Declare the SVG for browsers that support it, an ICO or PNG for everything else, and a PNG touch icon for Apple home screens. The filenames below are placeholders.

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

Browsers that understand SVG icons generally choose the SVG. Others, including Safari versions without SVG support, use the ICO or PNG. Export the raster files from the same master vector artwork so the icon looks the same everywhere.

Preparing the vector artwork

  • Simplify the mark: fine detail, thin strokes and small text become unreadable at tab size.
  • Use a square artboard with a viewBox, and centre the mark with deliberate padding.
  • Convert text to outlines so the icon does not depend on fonts installed on the viewer's device.
  • Remove editor metadata, hidden layers and unused definitions to keep the file small.
  • Confirm there are no embedded raster images if you want true vector scaling.
  • If you add dark-mode styling with a prefers-color-scheme media query inside the SVG, note that it only works where the SVG is rendered. Raster fallbacks need their own colour decision, such as a version that reads on both light and dark tab bars.

How to check compatibility yourself

Load the page in each target browser, including Safari on macOS and iOS, and see which icon appears in the tab and bookmarks. Browsers cache favicons aggressively, so use a private window, clear the site's data, or temporarily rename the icon file when testing changes. In Safari, also check the home screen icon, because it comes from the touch icon, not the favicon.