Reduce favicon size
How to shrink a favicon in pixel dimensions and file weight: which sizes to export, how to simplify vector logo artwork for small display, and how SVG, PNG and ICO files differ.
Contents
The short answer
Reducing a favicon's size can mean two different jobs. One is scaling the logo down to the very small pixel dimensions browsers display. The other is cutting the file's weight so it loads with minimal overhead. Both jobs start from the same place. Make a simplified version of the logo designed for tiny display, export it to the formats browsers and platforms expect, and strip out data the icon does not need. Shrinking the full logo uniformly rarely works. At tab-icon scale, fine detail, thin strokes and wordmarks tend to blur into an unreadable smudge.
This guide covers preparing favicon files from vector logo artwork. No specific measurements, test results or tool benchmarks were available for it. The guidance therefore relies on widely documented conventions and general design principles, not tested figures.
Which dimensions to target
Favicons are shown far smaller than almost any other logo application. The sizes below are commonly cited conventions for the main places a site icon appears. They are a starting point, not a verified current specification.
| Where the icon appears | Commonly used size | Typical format |
| Browser tabs and bookmarks | 16×16 and 32×32 pixels | ICO or PNG |
| Legacy multi-size icon file | 16, 32 and 48 pixels bundled together | ICO |
| Apple home-screen icon | 180×180 pixels | PNG |
| Android and web app manifest | 192×192 and 512×512 pixels | PNG |
| Browsers that support scalable icons | Resolution-independent | SVG |
Browser and platform requirements change over time. Check the current documentation for the platforms you support before you finalize an icon set. All of these targets are square. Place wide or tall artwork on a square canvas with balanced padding rather than stretching it to fit.
Resizing a logo for favicon use
Work from vector source artwork where possible. Genuine vector paths scale to any dimension without resampling, so each export is redrawn cleanly at its target size. A file extension alone does not prove the artwork is vector, though. An SVG, EPS, AI or PDF file can contain nothing more than an embedded bitmap. Open the file in a vector editor and view it in outline or path mode to confirm the shapes are real paths. If you only have a raster preview, such as a thumbnail or screenshot, treat it as reference material rather than source art. Resizing it downward is possible, but it cannot add detail, and enlarging it degrades quality.
- Reduce the logo to its most recognizable element, such as a symbol, monogram or single initial, rather than the full lockup.
- Remove or merge small details, gradients and fine textures that will not survive at 16 or 32 pixels.
- Thicken thin strokes and widen narrow gaps so shapes stay distinct at small sizes.
- Increase contrast, and check the icon against both light and dark browser themes.
- Preview the result at actual size, not zoomed in, before exporting.
At the smallest sizes, it often helps to nudge edges so they sit on whole pixels, which keeps lines crisp instead of blurry. Many designers keep one version tuned for 16 and 32 pixels and a separate, more detailed version for larger icons such as home-screen and app-manifest images. That is an editorial choice rather than a requirement, but it usually produces clearer results than scaling a single design across every size.
Reducing the file weight
Each format carries extra weight in different ways, so the reduction steps differ by file type.
- SVG: remove editor metadata, comments, hidden layers and unused definitions that design applications often leave behind.
- SVG: simplify paths and reduce excess anchor points, and lower numeric precision cautiously, checking that shapes do not visibly shift.
- SVG: remove embedded raster images. A bitmap inside an SVG adds weight and gives up the scalability that justifies the format.
- SVG: convert live text to outlines so the icon does not depend on fonts the viewer may not have.
- PNG: export at the exact target dimensions, limit the color count where the design allows, and run a lossless optimizer.
- ICO: bundle only the sizes you actually need, because every included image adds to the file.
No typical savings figures were available. Results depend heavily on the artwork's complexity and on how it was originally exported. Compare file sizes before and after on your own files, and recheck the icon visually after every optimization pass.
Keep an editable master
Optimized favicon files are delivery assets, not source files. Steps that make a favicon smaller also make it harder to edit later. These include outlining text, merging shapes, flattening layers and stripping metadata. Keep the original layered vector logo and a separate editable favicon master. Then you can return to them when the brand changes or a platform requests a new size.
Permission to modify the logo
If you are making a favicon from a logo you do not own, being able to download the file does not mean you may alter or use it. Simplifying, redrawing or cropping a logo is a modification. The artwork, any fonts in it and the trademark itself may each be covered by separate terms. Confirm with the logo owner or check the applicable license before you produce or publish a modified version.