SVG favicon — why and how to use one

An SVG favicon is a vector icon that stays perfectly sharp at any size. It is tiny in file size, can adapt to light and dark mode, and is supported by all modern browsers.

Why use an SVG favicon?

• Always sharp — vectors scale to any size without blurring.
• Tiny — often smaller than a single PNG.
• Dark-mode aware — a single file can switch colors with the system theme.
• One file — no need for separate 16/32/180/192/512 exports.

Add an SVG favicon

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" href="/favicon.ico" sizes="any">   <!-- fallback -->

Keep a PNG/ICO fallback for older browsers and Safari versions that do not yet render SVG favicons reliably. See ICO vs PNG for the raster side.

Dark-mode aware icon

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

When SVG is not enough

iOS home-screen icons and many app manifests still expect a PNG. Ship an SVG for tabs plus a 180×180 apple-touch-icon.png for mobile. Our PWA icons guide lists every size you need.

Make one in seconds

The free myfavicon generator converts your image to ICO and PNG in every size, right in your browser. Pro adds SVG vector export.