Choose favicon formats and sizes
Compare ICO, PNG and SVG favicons, learn which sizes browsers and devices request, and prepare vector logo artwork that stays legible at very small scales.
Contents
There is no single best favicon format. A dependable setup uses a small set of files, each for a different context. An SVG icon serves browsers that support scalable favicons. A PNG or ICO fallback covers the rest. Larger PNG icons serve home screens and installed web apps. All of these should come from one clean vector master. This article explains what each format does, the sizes commonly requested, and how to prepare logo artwork so it reads clearly at the smallest sizes.
The short answer
- Keep the master artwork as a vector file with real paths, then export every favicon from it.
- Serve an SVG favicon for browsers that support it. It scales cleanly and can adapt to light and dark themes.
- Serve a raster fallback, either an ICO file or a small PNG, for browsers and tools that do not use SVG favicons.
- Add a larger PNG for Apple home-screen icons, plus PNG icons listed in a web app manifest if the site can be installed.
- Design a simplified mark for small sizes instead of shrinking a full logo with a wordmark.
Favicon formats compared
The three main formats differ in four practical ways: how they scale, how widely they are supported, whether they can hold several sizes, and how they are edited. The table summarizes those differences as general characteristics. Exact browser support changes between versions, so check current browser documentation before you drop a fallback.
| Format | How it scales | Multiple sizes in one file | Typical role | Main caveat |
| SVG | Vector; renders sharply at any size if it contains paths rather than embedded images | Not needed; one file scales | Primary icon for browsers that support SVG favicons; can respond to dark mode | Support varies by browser and version; fine detail can still blur at very small pixel sizes |
| ICO | Raster; each size is a separate bitmap | Yes, an ICO container can bundle several bitmaps | Legacy fallback and the file many browsers request by default at the site root | Raster only; each size must be prepared and checked |
| PNG | Raster; fixed pixel dimensions | No; one size per file | Fallback tab icon, Apple touch icon, web app manifest icons | Needs a separate export for each size |
When SVG is the better choice
SVG is preferable when the browsers you care about support it. One file then serves every display density. An SVG can also include a prefers-color-scheme media query in its internal styles, so the icon can switch colors to stay visible on dark browser themes. Raster formats cannot do this. SVG is also easiest to keep in sync with the logo source, because it can come straight from the vector master.
Do not assume a file is vector because its name ends in .svg. An SVG can wrap an embedded bitmap. That file is just a raster image in a vector container and will blur when scaled. Open the file in a vector editor or read its markup. Real vector artwork is made of path, shape and fill elements, not a base64-encoded image.
When ICO or PNG is the better choice
Raster fallbacks are still useful. Some browsers, versions and third-party tools that fetch site icons do not use SVG favicons. Bookmark managers, feed readers and link previews are examples. Use ICO when you want one file at the conventional root location that bundles several small sizes. Use PNG when you reference each size explicitly in HTML or a manifest. PNG is also the expected format for Apple touch icons and manifest icons.
Which favicon sizes to prepare
Browsers and operating systems request different sizes for different places, such as tabs, bookmarks, home screens and app launchers. The sizes below are widely used conventions, not values measured for this article. Platform guidance changes over time, so confirm them against current browser and platform documentation.
- 16×16 and 32×32 pixels: the standard tab and bookmark sizes, often bundled together in an ICO file or exported as separate PNGs.
- 48×48 pixels: sometimes added to the ICO bundle for desktop shortcuts and higher-density displays.
- 180×180 pixels: the common size for an Apple touch icon used when a page is saved to an iOS home screen.
- 192×192 and 512×512 pixels: the sizes commonly listed in a web app manifest for Android home screens, install prompts and splash screens.
You cannot directly control how large a favicon appears in a browser tab. The browser chooses the display size and picks the closest file you provide. If an icon looks too small or too large, change the artwork: crop away padding, enlarge the mark within its canvas, or simplify it. Changing a declared size attribute does not fix this.
Referencing the files in HTML
A common minimal setup declares the SVG first, a raster fallback, and the Apple touch icon, then links a manifest for installable sites. File names and paths are placeholders; adjust them to your project.
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">The manifest lists the larger PNG icons with their sizes and MIME type. Browsers that support SVG favicons generally prefer the SVG entry, and others fall back to the ICO or PNG. How a browser picks among several declared icons is version-dependent, so test in the browsers your audience uses.
{
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}Preparing vector logo artwork for favicons
Most legibility problems come from the artwork, not the file format. A full horizontal logo with a wordmark becomes unreadable at 16 pixels. Favicon best practice is to work from a reduced version of the brand: a symbol, monogram or single letter that keeps its shape at tiny sizes.
- Start from the editable vector master, with outlined or properly licensed type, not from a flattened PNG or JPEG.
- Use a square artboard and decide deliberately how much padding to leave. Too much padding makes the icon look undersized in a tab.
- Remove thin strokes, fine gradients, small text and intricate detail that will merge into blur below about 32 pixels.
- Check contrast against both light and dark browser themes, or use the SVG color-scheme approach to switch fills.
- Preview the smallest raster exports at actual size. Nudge shapes onto the pixel grid where edges look soft, and consider a separately tuned small-size version if the scaled-down mark fails.
- Keep the SVG lean: remove editor metadata, hidden layers and unused definitions before publishing.
Permissions and trademarks
Turning a logo into a favicon means modifying and republishing brand artwork. Being able to download a logo file does not mean you may alter it, crop it into a symbol, or use it to represent a site. Typefaces in the artwork carry their own license terms, and the mark itself may be a protected trademark. For a client or employer, confirm that the brand owner approves the simplified favicon version. For third-party logos, check the owner's brand guidelines before using them.
Gaps to check before shipping
No subject-specific measurements, test results or version data were available for this article. The format comparison and size list reflect general, widely documented conventions. Before finalizing, confirm three things against current browser and platform documentation: which browser versions render SVG favicons, which sizes current platforms request for home-screen and app icons, and how browsers choose between several declared icons. Then test the actual files in the browsers and devices your audience uses.