Favicon sizes for a compact brand symbol
The favicon sizes a compact brand symbol commonly needs, why a simplified mark works better than a full logo, and how vector masters relate to raster exports.
Contents
There is no single ideal favicon size. A favicon is a set of files, each sized for a different place where browsers and operating systems show a site's icon. The usual approach is to keep one vector master of a compact brand symbol and export from it a small multi-resolution ICO file, an SVG favicon for browsers that support one, a touch icon for Apple home screens, and two larger PNGs for the web app manifest. This article covers those sizes, why the symbol rather than the full logo belongs in them, and where vector artwork ends and raster output begins.
The direct answer: a small set of sizes, not one
The sizes below are widely documented platform conventions, not measurements from this article. Browser and operating system requirements change over time, so check them against current platform documentation before final delivery.
| Asset | Common pixel size | Typical format | Where it is used |
| Classic favicon | 16×16 and 32×32, often with 48×48, bundled in one file | ICO | Browser tabs, bookmarks, legacy fallback |
| Scalable favicon | Resolution-independent | SVG | Browser tabs in browsers that support SVG favicons |
| Apple touch icon | 180×180 | PNG | Home screen shortcuts on Apple devices |
| Manifest icon, standard | 192×192 | PNG | Android home screens and installed web apps |
| Manifest icon, large | 512×512 | PNG | Splash screens and app install prompts |
If you have to pick one size to design and check against, use 16×16 or 32×32. Those are the smallest and most common renderings. A symbol that reads clearly there will almost always hold up at the larger sizes.
Why the compact symbol, not the full logo
A full lockup with a wordmark, tagline or horizontal arrangement turns into an unreadable smudge at 16 pixels. Favicons are square, so they suit the compact variant of a brand: a monogram, an icon or an isolated symbol. Choosing that variant is the first sizing decision, before any pixel dimensions.
Some brands keep the symbol as drawn in their logo system. Others draw a simpler favicon version with fewer details, heavier strokes and wider gaps between shapes. Which works better for a given mark is a design judgment. No platform requires either one.
Vector master versus raster exports
Only the SVG favicon can keep vector artwork in the delivered file. The ICO and PNG assets are raster images: fixed grids of pixels exported from the master. A favicon package therefore usually contains one vector file and several raster previews of it. The vector master, typically an SVG, AI, EPS or PDF with editable paths, should be kept separately as the source for future exports.
A file extension does not prove the file holds editable vector paths. An SVG or PDF can simply wrap an embedded raster image, and at favicon sizes a wrapped bitmap is hard to tell apart from real vector work. Open the file in a vector editor and confirm that the symbol is made of paths before treating it as a scalable master.
Preparing the symbol for small sizes
- Draw on a square artboard and decide on padding deliberately. Too much padding shrinks the mark, and too little crowds it against the edges.
- Preview the symbol at actual pixel size, not zoomed in. Thin lines and small counters often disappear at 16×16.
- At the smallest sizes, consider aligning key edges to the pixel grid so the exported raster stays crisp instead of blurry.
- Give the Apple touch icon an opaque background, because transparent areas may not render as intended on the home screen.
- For manifest icons that platforms may crop into circles or rounded shapes, keep the essential part of the symbol inside the safe zone given in the maskable icon guidance.
- If you supply an SVG favicon, it can include a style rule that adjusts colors for dark browser themes. This is a capability of the SVG format, but check that your target browsers support it.
Permission is separate from file access
Being able to download a logo file does not mean you may resize it, simplify it or publish it as a favicon. Trademark rights, artwork licenses and any font licenses in the original lockup are separate matters. Making a favicon from your own brand's symbol is routine. Making one from someone else's mark requires their permission to modify and use the artwork.
Evidence gaps
No subject-specific evidence was supplied for this article. That means no particular brand symbol, no testing data and no confirmed platform specifications as of a given date. The sizes above are widely documented conventions rather than verified findings. Advice on simplifying the mark, padding and pixel alignment is editorial judgment. Before delivery, confirm current requirements for each target browser and operating system.