Favicon Sizes for a Legible Browser Icon
What size a favicon should be, which sizes browsers and devices commonly use, and how to adapt vector logo artwork so the icon stays legible at 16 pixels.
Contents
The short answer
A favicon has no single correct size. It is a small square icon delivered in several sizes, because browser tabs, bookmarks, search results, phone home screens and installed web apps each display it at different dimensions. The smallest common display size, a browser tab at standard pixel density, is 16 by 16 pixels. That is the size at which legibility is decided. Every other size is either a sharper version for high-density screens or a larger icon for another context.
In practice, a robust favicon set is built from one square vector master. From it you export an SVG favicon for browsers that support one, raster PNG or ICO files for the small tab and bookmark sizes, and larger PNGs for touch icons and web app manifests.
Commonly used favicon sizes
The table below lists sizes that appear widely in browser and platform conventions. Support and preferred sizes change between browser and operating system versions, and no browser-specific test evidence was supplied for this article. Confirm current requirements in each platform's documentation before finalizing a delivery.
| Size | Typical use | Format |
| 16 × 16 | Browser tab at standard pixel density | ICO or PNG |
| 32 × 32 | Browser tab on high-density screens, taskbar and shortcut contexts | ICO or PNG |
| 48 × 48 | Desktop shortcuts; a common baseline in search-result favicon guidance | ICO or PNG |
| 180 × 180 | Apple touch icon for iPhone and iPad home screens | PNG |
| 192 × 192 | Web app manifest icon, often used for Android home screens | PNG |
| 512 × 512 | Web app manifest icon for splash screens and install prompts | PNG |
| Scalable | Modern browsers that accept a vector favicon | SVG |
Two documented constraints are worth knowing. First, favicons are square. A wide horizontal logo placed on a square canvas becomes too small to read. Second, Google's search guidance has asked for a square favicon whose dimensions are a multiple of 48 pixels, and it also accepts SVG. Check that guidance directly, because search-engine requirements are revised from time to time.
Vector versus raster favicon files
The format affects how the icon scales, so the distinction matters here.
- SVG favicons can be vector artwork. They scale cleanly to any display size and can be very small files, but older browsers and some platforms ignore them, so a raster fallback is still needed.
- ICO files are a raster container. One ICO can hold several bitmap sizes, such as 16, 32 and 48 pixels, and it remains the most widely recognized fallback.
- PNG favicons are raster images at one fixed size each. They are the usual format for touch icons and manifest icons.
- An SVG extension does not guarantee editable vector paths. An SVG can wrap an embedded bitmap, or it can reference fonts that are not available when the icon renders. Open the file and confirm that it contains real paths, with type converted to outlines, before treating it as a vector favicon.
Why a full logo rarely works at favicon size
Vector artwork scales mathematically, but it does not scale legibly without limit. At 16 by 16 pixels the entire icon has 256 pixels to work with. Thin strokes, small counters inside letters, taglines, fine gaps and subtle color shifts fall below the size of a single pixel. When the shape is rasterized, those details blur into gray or disappear. This is a general property of rendering detailed shapes onto a coarse pixel grid. It applies however clean the source paths are.
For this reason many brands use a reduced mark for the favicon rather than the full lockup. The reduced mark might be a symbol on its own, a single initial or a monogram. Whether a particular brand's favicon was designed this way is a question for that brand's own records. Visually, the pattern is common across the web.
Preparing legible favicon artwork from a vector logo
- Start from the simplest element of the identity, usually the symbol or a single letterform, and drop wordmarks, taglines and registration marks.
- Work on a square artboard and let the mark fill most of the canvas. Leave only a small margin, because surrounding empty space shrinks the visible icon.
- Thicken strokes and widen gaps so that each important line survives as at least one full pixel at 16 by 16.
- Reduce the palette to a few high-contrast colors. Low-contrast tints that read well in a large logo often merge at tab size.
- Create dedicated small-size versions instead of relying on automatic downscaling. Draw 16- and 32-pixel versions with edges aligned to the pixel grid so they render crisply.
- Check the icon against both light and dark browser themes. A transparent background can make a dark mark vanish on a dark tab bar. A solid or outlined shape, or a color-scheme media query inside an SVG favicon where browsers support it, can address this.
- Export the larger touch and manifest icons separately. Some platforms crop or mask these into rounded shapes, so keep the mark away from the edges.
Verifying the result
Judge legibility at the size the icon will actually appear. Viewing the exported 16- and 32-pixel files at 100 percent zoom, rather than zoomed in inside a design tool, shows what a visitor will see. The final check is the icon loaded in real browser tabs and bookmarks. If the mark cannot be recognized at 16 pixels, simplify the artwork further rather than adjusting the export settings.
What this article does not cover
No inspected artwork, measured rendering tests or version-specific browser documentation were supplied. The sizes above reflect widely published conventions rather than verified current requirements for any particular browser release. The design guidance reflects general raster and vector principles. It is not a review of a specific logo or tool.