Generate ICO favicons from WebP
Create a multi-size favicon (16, 32, 48, 64, 128, 256 pixels) from a single WebP source. Drop the result at /favicon.icoon your site.
WebP-to-ICO converter in development
ICO encoding needs custom container packing (downsample to multiple sizes, pack as PNG-in-ICO variants). The rest of the page describes how the conversion will work and what to expect.
In the meantime: WebP to PNG, WebP to JPG
How conversion will work
- Step 1
Select your WebP source
Click the upload area or drag and drop a square WebP image. Ideally at least 256×256 pixels.
- Step 2
Choose icon sizes
Pick the favicon sizes to include. The default set (16/32/48/64/128/256) covers all common browser and OS contexts.
- Step 3
Convert and download
Click convert. The tool generates each size, packs them into a single .ico file, and offers it for download. Drop it at /favicon.ico on your site.
How WebP-to-ICO conversion works
ICO is a container format that holds multiple image variants in a single file. A standard favicon ICO contains several square sizes — typically 16×16 through 256×256 — and the browser or operating system picks the most appropriate variant for the rendering context.
The conversion decodes the source WebP, downsamples it to each requested size, and packs the variants into an ICO container. Larger variants (typically 256×256) are stored as embedded PNG inside the ICO; smaller variants use raw BMP format with alpha channel data.
Two things to know about ICO favicons:
- Browsers cache favicons aggressively. After uploading a new favicon, clearing the browser cache or doing a hard reload is usually needed to see the change.
- The /favicon.ico convention is universal. Browsers look for the file at the site root automatically. Explicit
<link rel="icon">declarations are also supported and recommended for full coverage.
For format detail, see ICO Format overview, WebP format overview, and the SVG Format page (SVG is the modern complement to ICO favicons).
When to generate an ICO favicon
New site launch
Every site needs a favicon. The /favicon.ico at root is the universal fallback that works in every browser ever shipped.
Brand refresh / rebrand
A new logo means a new favicon. Generating the full multi-size ICO from the new brand asset takes seconds.
Windows pinned-site icon
Pinned sites on Windows use the 48×48 variant from the favicon ICO. Including this size in your favicon set improves the pinned-tab appearance.
Legacy browser coverage
Older browsers and certain RSS readers expect ICO at the site root. SVG favicons are the modern complement, not the replacement.
Multi-brand or product variants
Companies running multiple branded sites or product variants need a favicon per brand. Batch-generate from your brand asset library.
Web app PWA icons
Progressive Web App manifests reference larger PNG icons, but the ICO favicon is still the right default for browser-tab display.
Favicon size guidance
The standard favicon set and where each size is used:
| Size | Used by |
|---|---|
| 16×16 | Standard browser tab |
| 32×32 | Browser tab on high-DPI displays, bookmark bar |
| 48×48 | Windows pinned site, taskbar shortcuts |
| 64×64 | Larger display contexts, design tools |
| 128×128 | Some OS-level icon contexts |
| 256×256 | Maximum quality reference, Windows file explorer |
For maximum fidelity at small sizes, design pixel-perfect 16 and 32 variants in a vector tool and combine with the larger sizes. For brand-launch speed, a single 256×256 source downsampled to all sizes is usually acceptable.
Pair the ICO favicon with an SVG favicon and apple-touch-icon PNG for full modern coverage. See SVG Format and ICO Format.
Common issues and solutions
Small-size variants look fuzzy
Downsampling from a single source loses sharpness at very small sizes. For best results, design pixel-perfect 16×16 and 32×32 variants in a vector tool and feed those in separately rather than relying on auto-downsample.
Non-square source gets distorted or padded
Square the source first. ICO icons are always square; non-square sources can't fit without padding or stretching.
Transparency edges look jagged at 16×16
Anti-aliased transparency loses fidelity at very small sizes. This is a fundamental limit of small bitmap icons. SVG favicons render crisply at any size — consider using one alongside the ICO.
Favicon doesn't show up in browser
Browsers cache favicons aggressively. Clear cache, or use the browser's developer-tools 'Empty Cache and Hard Reload' option. Some browsers only re-check the favicon when the page is visited via a fresh tab.
iOS doesn't show the right icon
iOS uses apple-touch-icon, not favicon.ico. Add <link rel='apple-touch-icon' href='/apple-touch-icon.png'> with a 180×180 PNG.
I want to extract icons from an existing ICO
Use the reverse direction: ICO to WebP converter to extract the largest variant from an existing ICO file.
Frequently asked questions
Related resources
Extract icons from existing ICO files for use in design tools and modern web contexts.
Container structure, multi-variant storage, and modern favicon best practices.
The modern complement to ICO favicons: crisp at any size, stylable via CSS.