Website Favicon Sizes in Pixels

A website favicon has no single size. Browsers, operating systems and home-screen shortcuts each request their own dimensions. In practice, a site supplies one small square icon for browser tabs and a few larger square icons for bookmarks, mobile shortcuts and installed web apps. The common starting point is a 32×32 pixel icon, often packaged with a 16×16 version. The larger app icons are usually 180×180, 192×192 and 512×512 pixels.

The brief for this article contained no confirmed specifications. The pixel figures below are widely documented conventions, not tested measurements. Browser and platform vendors revise their requirements, so check current vendor documentation before finalizing a delivery.

Common favicon dimensions and where they appear

Size in pixels | Typical use | Usual format

16×16 | Browser tab icon at standard screen density | ICO or PNG

32×32 | Browser tab icon on high-density screens; general-purpose favicon | ICO or PNG

48×48 | Additional size often bundled inside a favicon.ico file | ICO

180×180 | Apple touch icon for home-screen shortcuts on iPhone and iPad | PNG

192×192 | Web app manifest icon, used for Android home-screen shortcuts | PNG

512×512 | Web app manifest icon, used for install prompts and splash screens | PNG

Scalable | Modern browsers that accept an SVG favicon | SVG

All of these icons are square. A wide horizontal logo will not fill the space at any of these sizes. It also becomes unreadable at 16 or 32 pixels. Most brands therefore use a compact element as the favicon, such as a symbol, monogram or single letter, rather than the full lockup.

Vector source versus the files the browser receives

The favicon set should come from vector artwork, but most of the delivered files are raster images. ICO and PNG favicons are fixed pixel grids. They are exported from the vector master at each target size. An SVG favicon is the exception: the browser draws it from vector paths and scales it to any size. Browser support for SVG favicons is not universal. A raster fallback is still standard practice.

An .svg extension does not prove a file contains editable vector paths. An SVG can wrap an embedded bitmap, and that bitmap blurs or pixelates when scaled like any other raster image. Before generating favicons from a supplied SVG, AI or EPS file, open it in a vector editor and confirm the mark is built from paths and shapes.

Keeping a logo legible at favicon size

Scaling vector artwork down does not make it readable at 16 or 32 pixels. Fine strokes, small counters, taglines and thin outlines merge or disappear at that scale. Designers often produce a simplified small-size version of the mark for this reason. Common changes include thicker strokes, fewer details and adjusted spacing. Some also align key edges to the pixel grid before export. Preview each exported size at actual pixels, not zoomed in, to judge whether the icon still works.

• Start from a square artboard so every export keeps the same proportions.
• Use a simplified mark or monogram rather than the full horizontal logo.
• Export each raster size directly from the vector master rather than resizing one PNG.
• Check contrast against both light and dark browser themes, since tab backgrounds vary.
• Keep the vector master with the delivered files so new sizes can be exported when requirements change.

Declaring favicons in a page

Browsers find the icons through link elements in the page head, and through a web app manifest for the larger app icons. A typical set of declarations looks like the following, with the file paths filled in for the specific site.

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

The manifest file lists the 192×192 and 512×512 icons. Search engines that show favicons in results publish their own size and format guidance, which may differ from browser conventions. Check that guidance directly if search appearance matters for the site.