logoredraws.com

SVG Favicon File Structure: Elements and Attributes

What goes inside an SVG favicon: the svg root element, the attributes that matter, the shape elements it contains, and how to tell true vector paths from embedded raster images.

Published

Contents
  1. The svg root element and its attributes
  2. Elements commonly found inside a favicon SVG
  3. A minimal example
  4. Vector paths versus embedded raster images
  5. Connecting the file to a web page
  6. Preparing an exported logo for favicon use
  7. Rights to the artwork
  8. Gaps in this overview

An SVG favicon is a plain-text XML file whose outermost element is the svg tag. That root element sets the rules for everything inside it: the xmlns attribute declares the SVG namespace, and the viewBox attribute defines the coordinate system that lets the icon scale cleanly to whatever size a browser tab, bookmark list or address bar needs. Inside the root sit the drawing elements, such as path, rect and circle, often organized with g groups and supported by definitions, styles and an optional title. This overview explains each part and why it matters for a small icon.

The svg root element and its attributes

Every SVG file, favicon or not, starts with one svg element that wraps all other content. For a favicon, only a few of its attributes do real work. Many others appear because design tools add them during export, and they can usually be removed without changing how the icon looks.

Attribute | What it does | Role in a favicon
xmlns | Declares the SVG namespace defined in the SVG specification | Required for a standalone .svg file to be read as SVG
viewBox | Four values (min-x, min-y, width, height) that define the internal coordinate space | Strongly recommended; it is what makes the artwork scale to any display size
width / height | Set an intrinsic display size | Optional; browsers size favicons themselves, and the viewBox already carries the aspect ratio
preserveAspectRatio | Controls how content fits when the display area has a different shape | Rarely needed if the viewBox is square
version, xml:space, editor-specific attributes | Legacy or tool metadata | Not needed; safe to strip in most cases

Elements commonly found inside a favicon SVG

Element | Purpose | Notes for favicon use
path | Draws arbitrary shapes from a series of commands | The main carrier of logo artwork; most exported marks are paths
rect, circle, ellipse, polygon, line | Basic geometric shapes | Compact and readable when the design allows simple geometry
g | Groups elements so they share transforms or styles | Useful for organization; deeply nested groups add size without benefit
defs | Holds reusable items that are not drawn directly | Gradients, clip paths and masks live here
linearGradient, radialGradient | Define color transitions | Subtle gradients may be invisible at favicon sizes
clipPath, mask | Restrict or fade visible areas | Work, but add complexity to a tiny file
style | Embedded CSS rules | Can include a prefers-color-scheme media query for light and dark variants
title | Text description of the graphic | Optional; helps accessibility and documentation
text | Live text rendered with a font | Better converted to outlined paths so the icon does not depend on font availability
image | Embeds or references a bitmap | Means part of the icon is raster, not vector

A minimal example

The snippet below shows the overall structure of a simple favicon with a light and dark variant. The namespace value is shown as a placeholder; in a real file it must be the exact SVG namespace string from the SVG specification, which most editors insert automatically.

<svg xmlns="[SVG namespace URI]" viewBox="0 0 32 32">
  <title>Brand icon</title>
  <style>
    .mark { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f5f5; }
    }
  </style>
  <g>
    <rect class="mark" x="4" y="4" width="24" height="24" rx="6"/>
  </g>
</svg>

The viewBox here sets a square drawing area, the style block swaps the fill color when the operating system reports a dark theme, and the shape uses a class rather than a hard-coded fill so the media query can override it. Whether a given browser honors the color-scheme query inside a favicon depends on that browser's implementation, so the default colors should work acceptably on both light and dark tab bars.

Vector paths versus embedded raster images

A .svg extension does not guarantee that the artwork is vector. Some files are simply a bitmap wrapped in an svg element through an image tag, often with the pixel data encoded inline as base64. Such a file gains none of the scaling benefits of real vector artwork and cannot be edited as shapes. Opening the file in a text editor settles the question quickly: path, rect, circle and similar elements indicate vector drawing, while an image element pointing to embedded data or an external file indicates raster content. Separately, a PNG or JPG preview supplied alongside an SVG is just a rendering and should not be treated as the source artwork.

Connecting the file to a web page

The favicon is declared in the page head with a link element whose type identifies it as SVG. Because SVG favicon support is not uniform across all browsers and versions, it is common practice to also provide a raster fallback such as an ICO or PNG file.

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

Preparing an exported logo for favicon use

  • Remove editor metadata, comments, hidden layers and unused definitions that design tools often export.
  • Convert live text to outlines so the result does not depend on installed fonts.
  • Avoid references to external images, fonts or stylesheets; browsers generally do not load external resources for SVG used as an image.
  • Use a square viewBox and keep the mark centered with some breathing room.
  • Simplify the design: fine details, thin strokes and subtle gradients tend to disappear at small sizes, so a simplified symbol often works better than the full logo.
  • Check the result against both light and dark backgrounds.

Rights to the artwork

Being able to download a logo's SVG file is not the same as having permission to modify it or use it as a favicon. The artwork, any fonts used in it and the trademark itself may each carry separate restrictions, so confirm usage rights with the brand owner or the relevant license before adapting someone else's mark.

Gaps in this overview

No specific product, browser test results or support data were supplied for this article, so it does not state which browser versions render SVG favicons or honor the dark-mode media query. Treat those points as items to verify in the browsers that matter to your audience before relying on an SVG-only setup.