Web design guide · English edition October 10, 2026

How to Create an SVG Favicon

Make a small browser-tab icon that stays clear at different sizes. Start with a simple SVG, try an emoji or monogram, and add a fallback for environments that need a raster icon. Test the actual browser-tab result, not just the large preview.

What makes an SVG favicon different?

SVG describes shapes, colors, and text instead of storing pixels at a fixed size. You can edit the source, reuse one vector file at different display sizes, and include internal styles. File size depends on the drawing; a complex SVG is not automatically smaller than a simple PNG.

A favicon is only one part of a site's icon setup. Browser tabs, pinned tabs, home-screen icons, and installed apps can have different requirements. Keep the image simple enough to read at 16 × 16 pixels, and do not assume one SVG replaces every platform-specific icon.

Create a monogram from scratch

A viewBox="0 0 100 100" gives you a convenient drawing area. Place a bold letter over a rounded background. The first example uses a system font, so its exact appearance may vary between devices.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect width="100" height="100" rx="22" fill="#8b7bff"/>
  <text x="50" y="70" font-size="58" font-family="Georgia, serif"
        font-weight="700" text-anchor="middle" fill="#fff">A</text>
</svg>

Save it as favicon.svg and link it in the HTML head:

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Use a data URI when you don't want a separate file

A small SVG can be embedded directly in the link's URL. In a data URI, encode the # in a hex color as %23; otherwise it becomes a URL fragment marker. Keep the HTML attribute quotes separate from those inside the SVG, or properly encode the SVG when generating the URL.

<link rel="icon" type="image/svg+xml"
  href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
  viewBox='0 0 100 100'><rect width='100' height='100' rx='22'
  fill='%238b7bff'/><text x='50' y='70' font-size='58'
  font-family='Georgia, serif' font-weight='700' text-anchor='middle'
  fill='white'>A</text></svg>">

Try an emoji favicon

An emoji inside a text element is a quick option for a project without a logo. Its shape and color depend on the operating system's emoji font, so compare it on the devices your audience uses.

<link rel="icon" type="image/svg+xml"
  href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
  viewBox='0 0 100 100'><text x='50' y='72' font-size='80'
  text-anchor='middle'>🚀</text></svg>">

The English emoji picker lets you search and preview alternatives before copying or downloading.

Adapt a monogram to light and dark browser themes

Internal SVG styles can use prefers-color-scheme. That preference follows the browser or system environment, not automatically the theme button on your page. Browser behavior varies, so test a readable default color combination too.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    rect { fill: #0a0a0f; }
    text { fill: #ffffff; }
    @media (prefers-color-scheme: light) {
      rect { fill: #ffffff; }
      text { fill: #0a0a0f; }
    }
  </style>
  <rect width="100" height="100" rx="22"/>
  <text x="50" y="70" font-size="58" text-anchor="middle"
        font-family="Georgia, serif" font-weight="700">A</text>
</svg>

Browser support and fallbacks

Compatibility deserves a current check. WebKit introduced SVG support for interface icons, including favicons, in Safari 26. Do not assume older Safari versions support the same behavior. See WebKit's Safari 26 release notes. This corrects the older Safari-version statement in the Spanish source; the Spanish page is unchanged.

Keep an ICO or PNG fallback and test in the browsers you support. Internal SVG theme styling is not guaranteed to behave identically everywhere.

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

Common mistakes to catch

Missing SVG namespace: include xmlns="http://www.w3.org/2000/svg" for a standalone SVG.
Unencoded URL characters: a literal # can break a data URI.
Conflicting quotes: validate the final link element, not only the SVG drawing.
Too much detail: inspect the icon at actual tab size; thin strokes can disappear.
Font assumptions: use an available font or outlines for predictable lettering rather than expecting your website's external font to load inside the icon.
Only testing one theme: compare dark and light tab bars.
Stale browser cache: verify the served file and retest when an older icon remains visible.

Frequently asked questions

Do I still need favicon.ico?

A fallback is useful for older or specialized clients. Some tools request /favicon.ico directly. Supplying a suitable ICO or PNG alongside the SVG can avoid a missing-icon result; test the formats and declarations used by your project.

What size should an SVG favicon be?

The viewBox defines its drawing coordinate system. A 100 × 100 viewBox is convenient, but the real design test is readability when the browser displays it at a small tab size, often around 16 × 16 pixels.

Will an emoji look the same everywhere?

No. Emoji fonts and rendering vary by operating system and browser. Choose an emoji with a recognizable silhouette and compare it on more than one device.

Create your own

Explore the favicon gallery and generators for ready-to-copy designs, emoji options, and monograms. Learn how to recolor SVG icons, or try animated wavy text for a different SVG project.