What each size is for
| Size | File | Used by |
|---|---|---|
| 16, 32, 48 px | icon-16.png … and favicon.ico | Browser tabs, bookmarks, Windows |
| 64, 128 px | icon-64.png, icon-128.png | Desktop shortcuts, high-density tabs |
| 180 px | apple-touch-icon.png | iPhone and iPad home screen |
| 192 px | icon-192.png | Android home screen, web app manifest |
| 512 px | icon-512.png | Web app manifest splash, app listings |
Clean edges at every size
Every size is computed from the squared logo through the same resampler as the rest of the site, with colour weighted by opacity. That one detail is the difference between a logo that sits cleanly on a dark browser tab and one wearing a faint grey outline. The small sizes use an area average by default — each icon pixel is the mean of the logo area it covers — which keeps thin strokes even rather than shimmering.
Limits
- Vector files (SVG) are not opened: export the logo as a large PNG first.
- A 16 px icon cannot show fine lettering whatever the method; simplify the mark for tiny sizes if it matters.
- favicon.ico stores PNG images inside, the form every current browser and Windows since Vista read.
Questions
Which sizes do I get?
PNGs at 16, 32, 48, 64, 128, 180, 192 and 512 px square, a favicon.ico holding the 16, 32 and 48 px images, and a short HTML snippet with the link tags — all in one ZIP. The 180 px file is named apple-touch-icon.png, the name iPhones and iPads look for.
Why do some logos get a dark or white halo when made smaller, and why not here?
A transparent pixel still has a colour value, usually black or white. A resizer that averages colours without weighting them by opacity mixes that hidden colour into the edge and leaves a fringe. This resampler always filters premultiplied — each colour weighted by its opacity — so a transparent neighbour contributes nothing and the edge keeps the logo's own colour.
My logo isn't square. What happens?
Icons are square, so you choose: pad with transparency (the default — the whole logo stays in), pad with white, or crop the centre. The panel says exactly how many pixels are added or cut before you save.
Can I resize a logo without losing quality?
Going down, yes: the small icons are averaged from the logo's own pixels, so nothing is invented. Going up past your file's size cannot add detail — the panel marks those sizes as enlarged and lets you leave them out. For crisp large icons, start from the biggest version of the logo you have.
Which method should I pick for the small sizes?
Area average, the default, gives the cleanest 16 and 32 px icons. Lanczos is sharper at large sizes and can show a faint halo at small ones. Nearest is only for pixel-art logos drawn on a grid.
Neighbouring measurements
Need one exact size instead of a set? Change the size in pixels. A pixel-art logo? Whole-number nearest keeps every block square.
- Change image size in pixelsA box in pixels: fit inside, fill and crop, or stretch, with the factor printed.
- Resize pixel artWhole-number nearest: every block square, no colour invented.
- Resize images for websiteOne photo to a set of widths in WebP and JPEG, with srcset markup.
- Image resamplingA percentage-led pixel resize with the interpolation cost stated before export.
