Website Favicon Size in Pixels
Favicon sizes in pixels explained: the common 16, 32 and 48 pixel browser icons, larger home-screen and app icons, and how a compact vector symbol supports every export.
Contents
The short answer
A website does not have one favicon size. It has a small set of square icons. The classic browser-tab favicon is 16 × 16 pixels. Most sites also supply 32 × 32 for high-density screens and some browser interfaces, and many add 48 × 48. Larger square versions cover places outside the tab: about 180 × 180 for icons saved to an iPhone or iPad home screen, and 192 × 192 and 512 × 512 for Android home screens and installable web apps. Many sites also provide an SVG favicon, which supporting browsers can scale to whatever size they need.
These sizes are widely published conventions. They do not come from evidence supplied for this article, which contained no confirmed specifications. Browser and platform requirements change over time, so check current platform documentation before you finalize a favicon set.
Common favicon sizes at a glance
| Size (pixels) | Typical use | Usual format |
| 16 × 16 | Browser tabs, bookmarks, history lists | ICO or PNG |
| 32 × 32 | High-density tabs, some browser shortcuts and taskbars | ICO or PNG |
| 48 × 48 | Some desktop and site-shortcut contexts | ICO or PNG |
| 180 × 180 | Apple home-screen (touch) icon | PNG |
| 192 × 192 | Android home screen, web app manifest | PNG |
| 512 × 512 | Web app splash screens and install prompts | PNG |
| Scalable | Browsers that accept vector favicons | SVG |
What a favicon is in logo terms
A favicon is the small square icon a browser shows in tabs, bookmarks, history and address-bar suggestions. The larger sizes in the same family appear when a visitor saves the site to a phone home screen or installs it as a web app. Within a brand identity, the favicon is one of the smallest applications of the logo. It is usually a compact symbol variant, not a scaled-down copy of the full lockup.
Why the full logo rarely works at these sizes
A 16 × 16 icon has 256 pixels in total. At that size, wordmarks, taglines, thin strokes, small counters and subtle gradients blur into noise. Favicons that work well usually rely on a single initial, a monogram or a standalone symbol, with heavier strokes and simplified shapes. Favicons are square, so a wide or tall mark has to be redrawn or centered with padding. Some platforms also crop larger icons into circles or rounded squares, so keep essential detail away from the edges. Browsers can show tabs on light or dark backgrounds, so it is a sensible precaution to check the icon's contrast against both.
Where vector artwork fits in
Most favicon files are raster images. PNG files store pixels. An ICO file is a container that can bundle several raster sizes, such as 16, 32 and 48 pixels, into one file. SVG is the vector exception. The vector master is still where the favicon should be designed: you draw the compact symbol once as clean paths, then export it to each pixel size. Automatic downscaling can soften edges at 16 and 32 pixels, so the smallest exports often benefit from manual adjustments that align shapes to the pixel grid. That is a design judgment, not a technical requirement.
A file extension does not prove a file contains vector artwork. An SVG or other vector-format file can wrap an embedded raster image, and a file labeled as vector may be only a raster preview. Before you use a file as the source for favicon exports, open it in a vector editor and confirm it contains editable paths rather than placed pixels.
A practical favicon set from a vector logo
- Start from a verified vector master of the compact symbol, not the full logo lockup.
- Simplify the symbol for small sizes: fewer details, heavier strokes, no small text.
- Fit it to a square artboard, with padding where the mark is not naturally square.
- Export raster PNGs at 16, 32 and 48 pixels and combine the small sizes into an ICO file if your setup uses one.
- Export larger PNGs at 180, 192 and 512 pixels for home-screen and web app use.
- Export an SVG version for browsers that support vector favicons, keeping it as clean paths.
- Preview each size at actual pixel dimensions on light and dark backgrounds and adjust the smallest sizes by hand if they blur.