How to use it
- Choose which sizes to pack into the icon.
- Drop in the WebP image.
- Download the .ico.
Where WebP logos come from
If you saved your own logo from your website, chances are it came down as WebP, since that is what most site builders serve now. Icon files need ICO for the widest support, especially for the default /favicon.ico that browsers request automatically and for Windows shortcuts.
Check the resolution
Web images are often resized for display, so a saved logo might be only 150 or 200 pixels wide. That is fine for 16, 32 and 48-pixel icons, but will look soft at 256. If you can, get the original logo file, ideally SVG, and use that instead.
Lossy source, crisp icons
A lossy WebP can have faint compression noise around edges. At favicon sizes the downscaling averages that away, so it rarely shows. At 128 pixels and above, it can. If the larger sizes look speckled, stick to the small ones.
WebP and ICO compared
| WebP | ICO | |
|---|---|---|
| First released | 2010 | 1985 |
| Compression | Lossy or lossless | Holds PNG or BMP images |
| Transparency | Yes | Yes |
| Animation or pages | Animation | Several sizes in one file |
| Best for | Images on websites | Favicons and Windows icons |
| Support | All current browsers; some apps and forms still refuse it | Browsers and Windows |
Questions people ask
Does WebP transparency carry into the ICO?
Yes.
Which sizes do I need?
For a favicon, 16, 32 and 48 px.
Can I make favicons for iPhone and Android too?
Yes, with the favicon generator.