logoredraws.com

Multiple Favicon Sizes: Which Ones You Need and Why

Why a favicon needs several sizes, which contexts use them, how SVG and ICO fit in, and how to prepare each size from vector logo artwork.

Published

Contents
  1. Why a single favicon size falls short
  2. Commonly used sizes by display context
  3. Where an SVG favicon fits
  4. Preparing each size from vector logo artwork
  5. Referencing the sizes in a page
  6. Limits of this overview

A favicon is not one image but a small set of images. Browser tabs, bookmarks, phone home screens and installed web apps each request an icon at a different size, and a single file rarely looks right everywhere. In practice, a site ships a small multi-size ICO or PNG pair for browser tabs, a larger PNG for Apple home-screen shortcuts, larger PNGs listed in a web app manifest, and optionally an SVG that browsers which support it can scale. Each size should come from the same vector logo source but be adjusted so the mark stays legible at that size.

Why a single favicon size falls short

Raster icons do not scale cleanly. A large image shrunk by the browser to tab size can turn soft or muddy, and a tiny image enlarged for a home-screen tile looks blocky. Display density adds a second variable: a high-density screen shows a tab icon with roughly twice the pixels of a standard screen. Supplying several sizes lets each platform pick the closest match instead of resampling.

Commonly used sizes by display context

The sizes below are widely documented conventions rather than figures drawn from evidence supplied for this article. Platform requirements change, so check current browser and operating-system documentation before finalizing a set.

Display context | Typical size | Usual format | How it is referenced
Browser tab, standard density | 16 x 16 | ICO or PNG | link rel="icon"
Browser tab, high density; taskbar | 32 x 32 | ICO or PNG | link rel="icon"
Desktop shortcuts on Windows | 48 x 48 | Bundled inside an ICO | favicon.ico file
Apple home-screen shortcut | 180 x 180 | PNG | link rel="apple-touch-icon"
Installed web app, Android home screen | 192 x 192 | PNG | Web app manifest icons list
Installed web app splash and app listings | 512 x 512 | PNG | Web app manifest icons list
Any size, in browsers that support it | Scalable | SVG | link rel="icon" type="image/svg+xml"

An ICO file is a container that can hold several raster images, so 16, 32 and 48 pixel versions can travel in one file and the browser or operating system picks the one it needs. PNG files hold one size each, which is why the larger icons are listed individually.

Where an SVG favicon fits

An SVG favicon is genuine vector artwork, so one file can render at any size, and it can include a prefers-color-scheme media query to switch colors for dark interfaces. Browser support is not universal and has historically been weakest in Safari, and home-screen and manifest contexts generally expect PNG. Treat SVG as an addition to the raster set, not a replacement for it.

Scalability does not solve legibility. An SVG still renders at 16 pixels in a tab, where fine detail disappears. A file with an .svg extension may also wrap an embedded raster image rather than vector paths. In that case it is a bitmap in a vector wrapper and gains none of the scaling benefit. Open the file in a vector editor or inspect its markup to confirm it contains paths.

Preparing each size from vector logo artwork

Start from the editable vector master of the logo, not from a PNG or a PDF preview. Many files labelled as logos contain only a flattened raster preview. Confirm that the artwork contains editable paths before building icons from it. If the logo comes from a third party, permission to download a file is separate from permission to modify the artwork, its fonts or its trademark.

  • Choose the symbol, not the full lockup: a wordmark or tagline becomes unreadable at tab size, so use the icon element, a monogram or a single distinctive letter.
  • Simplify for the smallest sizes: remove thin strokes, inner details and gradients that collapse into noise at 16 and 32 pixels.
  • Adjust per size rather than only scaling: thicken strokes and align edges to the pixel grid on the small versions, and allow more detail on the 180, 192 and 512 pixel versions.
  • Plan for backgrounds: Apple home-screen icons are typically shown on an opaque tile, so a transparent mark may need a solid background color; manifest icons may be cropped into shapes by the platform, so keep the mark away from the edges.
  • Check contrast in both light and dark browser themes, especially for a transparent tab icon.
  • Export each raster size directly from the vector master instead of resizing one exported PNG.

Referencing the sizes in a page

A typical head section points to each file explicitly. The bracketed placeholders stand in for your own file paths.

<link rel="icon" href="[multi-size ICO file]" sizes="32x32">
<link rel="icon" href="[SVG icon file]" type="image/svg+xml">
<link rel="apple-touch-icon" href="[180 x 180 PNG file]">
<link rel="manifest" href="[web app manifest file]">

The 192 and 512 pixel PNGs are not linked in the HTML. They are listed in the manifest's icons array, each with its src, sizes and type.

Limits of this overview

No source evidence was supplied for this article. The sizes and support notes above reflect general, widely published conventions, not tested or measured results. Exact requirements for specific browser versions, operating systems or app stores, and current SVG favicon support in each browser, should be confirmed against up-to-date platform documentation.