Website Favicon Icon Size: Which Dimensions to Prepare and Why a Vector Master Matters
Which favicon sizes a website needs, how SVG and raster favicon files differ, and how to prepare a small icon from vector logo artwork.
Contents
The short answer
No single favicon size covers every situation. Browser tabs, bookmarks, phone home screens and installable web apps each request icons at different dimensions, so the practical answer is a small set of files exported from one master design. A widely used baseline is a multi-size ICO file for the classic browser tab, a scalable SVG favicon for browsers that accept it, a larger square PNG for Apple home-screen shortcuts, and two PNG sizes referenced by a web app manifest for Android and installed web apps.
The dimensions below are common conventions drawn from general platform practice, not from evidence supplied for this article. Browser and operating-system requirements change, so confirm them against current vendor documentation before finalizing a delivery.
| Use | Typical format | Commonly used size |
| Classic browser tab and bookmarks | ICO containing several raster images | 16×16, 32×32 and often 48×48 pixels |
| Modern browser tab | SVG | Scalable; drawn on a square artboard |
| Apple home-screen shortcut | PNG | 180×180 pixels |
| Android and installed web apps (manifest) | PNG | 192×192 and 512×512 pixels |
How SVG favicons differ from raster favicon files
ICO and PNG favicons are raster images: a fixed grid of pixels at a set size. An SVG favicon can be true vector artwork, meaning shapes are described mathematically and render sharply at whatever size the browser displays them. That makes SVG the closest favicon format to an editable vector logo, and some browsers also support switching colors inside an SVG for light and dark interface themes.
An SVG extension alone does not guarantee vector content. An SVG file can simply wrap an embedded PNG or JPEG, in which case it behaves like a raster image and will blur when scaled. Before treating a favicon or logo file as editable, open it in a vector editor and check whether it contains paths and shapes rather than a placed bitmap. The same caution applies to logo packages: a preview thumbnail or a filename does not show how the artwork is actually built.
Because not every browser or platform accepts SVG favicons, the raster files in the table are still needed as fallbacks. In practice, the SVG and the raster exports should all come from the same vector master so they stay visually consistent.
Preparing a favicon from vector logo artwork
A full logo rarely works at 16 pixels wide. Wordmarks, taglines and fine detail collapse into noise at that size, so favicons are usually built from a simplified mark: a symbol, monogram or single letter taken from the logo system. The editorial judgment here is to favor bold shapes, strong contrast and generous spacing over faithful reproduction of every detail.
- Work on a square artboard so the icon is not distorted when exported to square sizes.
- Simplify the mark for small sizes instead of shrinking the full logo.
- Preview exports at actual pixel size, not zoomed in, and adjust shapes that blur or merge.
- Consider a separate, more simplified drawing for the smallest raster sizes if the larger version loses legibility.
- Check how the icon reads against both light and dark browser backgrounds.
- Keep the layered vector master file alongside the exported favicon set for future revisions.
Having access to a logo file is not the same as having permission to alter it. Turning a company's logo into a simplified favicon modifies trademarked artwork, and any lettering may depend on font licenses. When the logo belongs to a client or third party, confirm that adapting the mark is permitted before producing a favicon set.
Gaps in this assessment
No subject-specific evidence was supplied for this article: no tested measurements, browser support data, vendor specifications or dates. The sizes listed reflect commonly cited conventions rather than verified current requirements, and browser support for SVG favicons and theme-aware icons in particular should be checked against up-to-date documentation for the platforms a site needs to support.