Favicon Sizes for Websites
Which favicon sizes a website typically needs, how SVG, ICO and PNG versions differ, and how to adapt a vector logo so it stays legible at tab-icon size.
Contents
The short answer
A website favicon is usually a small set of square assets, each serving a different place where browsers and devices show your icon. A typical setup includes a scalable SVG for browsers that support it, a multi-resolution ICO file as a fallback, an Apple touch icon for iOS home screens, and larger PNG icons referenced from a web app manifest. The sizes below are widely documented conventions, not measurements from this article. Browser and platform requirements change, so check them against current vendor documentation before you publish.
| Asset | Typical dimensions | Where it is used |
| SVG favicon | Scalable, with no fixed pixel size | Browser tabs and bookmarks in browsers that support SVG favicons |
| ICO file | 16×16 and 32×32, often with 48×48 bundled in the same file | Fallback for older browsers and some desktop contexts |
| Apple touch icon (PNG) | 180×180 | Home-screen shortcuts on iPhone and iPad |
| Web app manifest icons (PNG) | 192×192 and 512×512 | Android home screens, installable web apps and launch screens |
Why the smallest size should drive the design
Tab icons are often displayed at 16 or 32 pixels. At that scale, a full logo with a wordmark, tagline or fine linework usually becomes an unreadable smudge. For this reason, favicon design starts with choosing a symbol. The best candidate is typically the brand mark on its own, a monogram, or a simplified glyph drawn from the logo. Thin strokes, small counters, gradients and small text tend to disappear first, so a favicon version often uses heavier weights and fewer shapes than the master logo.
Every favicon format expects a square canvas, but most logos are not square. Plan how the symbol sits inside the square: how much padding surrounds it, and whether it needs a solid background shape to stay visible on both light and dark browser themes. Opinions vary on what looks best, but you should decide these things on purpose. Letting an export tool center a wide logo in a square usually produces an icon that is too small to read.
Vector source versus raster outputs
The cleanest workflow keeps one vector master for the favicon symbol and exports every required size from it. An SVG favicon can stay vector all the way to the browser. ICO and PNG favicons are raster formats, which means they are fixed grids of pixels exported at specific dimensions. Export each raster size directly from the vector source. Avoid scaling a single large PNG down, which tends to blur edges. At the smallest sizes, some designers adjust shapes by hand so edges line up with the pixel grid. That is an editorial choice, not a format requirement.
An .svg extension does not guarantee true vector artwork. An SVG file can wrap an embedded raster image, and that image will not scale cleanly. Before treating an SVG as your favicon master, open it in a vector editor and confirm that the artwork is made of editable paths. The same check applies to logo files received from clients or downloaded from brand pages.
SVG favicon considerations
An SVG favicon can include a CSS media query for the user's color-scheme preference. This lets one file switch between light and dark variants, which raster formats cannot do. SVG favicon support varies across browsers, so keep the ICO and PNG fallbacks in place rather than relying on the SVG alone. Keep the SVG lightweight: remove editor metadata, hidden layers and unused definitions before deploying it.
Using a logo you did not create
Being able to download a logo file does not mean you may crop it, simplify it into a favicon, or use it on your own site. Redrawing a mark as a favicon is a modification. The artwork, any fonts in it, and the trademark itself may each carry separate permissions. If the favicon represents a brand you do not own, follow that brand's published usage terms or get approval from the rights holder.
Preparation checklist
- Choose a simplified symbol or monogram rather than the full logo lockup.
- Build it on a square vector canvas with deliberate padding.
- Confirm the master file contains real vector paths, not an embedded image.
- Preview the symbol at 16 and 32 pixels before finalizing.
- Export the SVG, a multi-size ICO, the 180×180 Apple touch icon and the 192×192 and 512×512 manifest PNGs.
- Check the result on light and dark browser themes.
- Verify current size requirements in each platform's documentation.