Favicon Sizes and Proportions
Common favicon sizes and the 1:1 ratio, explained: which pixel dimensions browsers and devices use, what goes in an ICO file, how to declare sizes in HTML, and how to adapt a vector logo for tiny icons.
Contents
The short answer
A favicon is a square icon with a 1:1 ratio. There is no single correct size, because browsers, operating systems and home-screen shortcuts each request different dimensions. A typical setup has three parts. The first is a small multi-resolution ICO file or set of PNGs for browser tabs. The second is a scalable SVG for browsers that support it. The third is a few larger PNGs for touch devices and installed web apps. Every version should come from one master vector artwork, simplified so it still reads at the smallest size.
The sizes below are widely used conventions, not figures from the evidence for this article. Browser and platform requirements change, so check current vendor documentation before you finalize a delivery.
| Size (pixels) | Common use | Typical format |
| 16 × 16 | Browser tabs and bookmarks at standard pixel density | ICO or PNG |
| 32 × 32 | Tabs on high-density screens, some taskbar shortcuts | ICO or PNG |
| 48 × 48 | Some desktop shortcuts and site tiles | ICO or PNG |
| 180 × 180 | Apple touch icon for home-screen shortcuts | PNG |
| 192 × 192 | Web app manifest icon for Android home screens | PNG |
| 512 × 512 | Web app manifest icon for splash screens and install prompts | PNG |
| Any (scalable) | Modern browsers that accept vector favicons | SVG |
Why the ratio is always square
Browsers and platforms place favicons in square slots. A wide or tall logo is not stretched to fit. It is scaled down until its longest side fits the square, so a horizontal wordmark may end up only a few pixels tall at 16 × 16. That is why the ratio question is really a symbol-selection question. Choose the part of the identity that works inside a square, such as a monogram, a standalone mark or a single distinctive shape. Do not shrink the full lockup.
Some platforms crop icons into circles or rounded squares, especially home-screen and app-install icons. Keep important detail away from the edges of the larger PNG versions so the mark survives that masking.
Adapting vector logo artwork for tiny sizes
Vector artwork scales to any dimension without losing quality, but scaling alone does not make a logo readable at 16 or 32 pixels. Fine lines, small counters, thin gaps and taglines blur or disappear at that scale. The usual approach is to make a dedicated favicon version of the mark:
- Use the symbol or monogram rather than the full logo with text.
- Remove secondary details, gradients and thin outlines that fall below one pixel.
- Thicken strokes and widen gaps so shapes stay separate when rendered.
- Test against light and dark browser themes, since tab backgrounds vary.
- Preview the artwork at actual pixel size, not zoomed in, before exporting.
- Align key edges to the pixel grid for the smallest raster exports to reduce blurring.
Some designers draw a separate, simplified file for the 16 and 32 pixel exports and keep a more detailed version for the larger sizes. That choice is an editorial judgment, not a technical requirement. It is often worth it when the main mark is intricate.
ICO resolution and multi-size files
The ICO format can hold several raster images of different sizes in one file. The browser or operating system picks the closest match. A common practice is to pack the 16, 32 and 48 pixel versions together. The ICO is still a raster container: each image inside is a fixed grid of pixels, even when it was exported from vector artwork. ICO is kept mainly for broad compatibility with older browsers and software.
Declaring favicon sizes in HTML
Favicons are referenced with link elements in the page head. The sizes attribute tells the browser the dimensions of each raster file, and an SVG can be marked as scalable. The snippet below shows a typical pattern. Replace each placeholder path with the actual location of the file on your site.
<link rel="icon" href="FAVICON_ICO_PATH" sizes="32x32">
<link rel="icon" href="FAVICON_SVG_PATH" type="image/svg+xml">
<link rel="apple-touch-icon" href="APPLE_TOUCH_ICON_PATH">
<link rel="manifest" href="WEB_MANIFEST_PATH">The 192 and 512 pixel icons are usually listed inside the web app manifest file rather than as separate link elements. Browser support for SVG favicons and the way each browser chooses among several declared icons can differ, so test the result in the browsers your audience uses.
Vector, embedded raster or raster preview?
An SVG extension does not guarantee true vector paths. An SVG file can wrap an embedded raster image, and then it scales no better than a PNG. Likewise, a logo package labeled as vector may contain only raster previews. Open the source artwork in a vector editor and confirm that the shapes are editable paths before you treat it as a master for favicon exports. A genuine vector SVG favicon stays sharp at any size. An SVG with an embedded bitmap does not.
Permission to adapt a logo
Making a favicon usually means simplifying, cropping or redrawing a logo. Being able to download a logo file does not by itself grant the right to modify the artwork, use its fonts or represent the trademark. For your own brand this is rarely an issue. For a client's or a third party's logo, confirm that you are authorized to create and publish derived versions.
Gaps in the available evidence
No subject-specific evidence was available for this article. There were no measured test results, no official specification excerpts and no dated statements of browser support. The pixel sizes and practices described here are general conventions. Confirm the exact requirements for your target browsers and platforms against their current documentation.