SVG Favicon Sizing: width, viewBox and the Viewport

The short answer

In an SVG favicon, the viewBox attribute does most of the work. It defines the internal coordinate system of the artwork, and that is what lets the browser scale the icon cleanly into whatever square slot it uses for tabs, bookmarks or history lists. The width and height attributes set the size of the viewport, the area the SVG is drawn into. In a favicon, the browser decides the final display size anyway, so width and height are optional. A missing or badly set viewBox is the more common cause of a cropped, off-center or unscaled icon.

This article covers the root svg element of a standalone vector icon file referenced as a site favicon. It does not cover raster favicon formats except as fallbacks, and it does not cover inline SVG placed in page markup, where CSS layout rules add further considerations.

Three terms that are easy to mix up

Term | What it is | Role in a favicon

Viewport | The rectangular area on screen where the SVG is rendered | Supplied by the browser's icon slot; you rarely control it directly

width / height | Attributes on the root svg element that set the viewport's size | Optional; they act as an intrinsic size hint, but the browser rescales the icon to its slot

viewBox | Four numbers (min-x, min-y, width, height) that define the coordinate space of the drawing | Essential; it maps the artwork onto the viewport so it scales instead of clipping

How the viewBox attribute works

The viewBox value has four numbers: min-x, min-y, width and height. Together they describe a rectangle in the drawing's own units. The browser stretches or shrinks that rectangle to fit the viewport. A viewBox of 0 0 64 64 means the artwork occupies a 64-by-64-unit square starting at the origin. Those units are not pixels. They only matter in proportion to each other and to the paths drawn inside them.

Without a viewBox, the SVG has no instruction for mapping its content onto a differently sized viewport. When such a file is displayed as an image at a size other than its declared width and height, browsers typically do not scale the drawing. Part of it gets clipped, or the icon sits in a corner surrounded by empty space. For a favicon that is always shown far smaller than typical design-tool artboards, this is the main failure to avoid.

Why aspect ratio matters

Favicon slots are square. If the viewBox is not square, for example a wide wordmark exported with its full horizontal extent, the default preserveAspectRatio behavior (centered, scaled to fit) shrinks the artwork until its longest side fits. The remaining space is left empty. The icon stays undistorted, but it can become too small to read. Practical options:

• Use a square viewBox and design the mark to fill it, usually with a symbol or monogram rather than a full horizontal logo.
• If the source artwork is not square, pad the viewBox to a square deliberately instead of relying on automatic letterboxing.
• Avoid setting preserveAspectRatio to none. That stretches the artwork to fill the slot and distorts the logo.

Setting width and height on the svg width attribute and its pair

For a favicon, you can omit width and height, or set them to values that match the viewBox proportions. What matters is that they do not contradict the viewBox's aspect ratio. Design tools sometimes export width and height in physical units such as points or millimetres, or with values copied from a large artboard. These do not break scaling as long as a correct viewBox is present. Still, simplifying them makes the file easier to read and keeps its intent clear.

<!-- Root element of a square icon file (namespace declaration omitted here) -->
<svg viewBox="0 0 64 64" width="64" height="64">
  <!-- vector paths drawn within the 0–64 coordinate range -->
</svg>

<!-- Referencing it from the page head -->
<link rel="icon" type="image/svg+xml" href="[your-icon-file]">

A standalone SVG file also needs the standard SVG namespace declaration on its root element, which most export tools add automatically. The numbers in the snippet are illustrative. Any square viewBox works as long as the drawing sits inside it.

Check what is actually inside the file

An .svg extension does not guarantee vector artwork. An SVG can wrap an embedded raster image, such as a PNG encoded inside an image element. In that case, a correct viewBox still scales the container, but the picture inside blurs or pixelates just like any bitmap. Before relying on an SVG favicon for sharpness, open the file in a text editor or vector tool and confirm the logo is built from paths and shapes, not an embedded image. The same check tells you whether the artwork is genuinely editable.

Pre-delivery checklist

• The root svg element has a viewBox, and its width and height values are equal.
• The artwork fills the viewBox with only the padding you intend.
• Any width and height attributes match the viewBox proportions or are removed.
• preserveAspectRatio is left at its default or set to a value that does not distort the mark.
• The logo is made of vector paths, not an embedded raster image.
• The design stays legible when viewed at a very small size, since browser icon slots are small.

Gaps to be aware of

No source material was supplied on specific browser versions, exact pixel sizes each browser uses for its icon slots, or current levels of SVG favicon support across browsers and platforms. Support has historically been uneven. Check up-to-date browser documentation before shipping, and consider keeping a raster fallback alongside the SVG favicon.