How to use
- Choose Favicon set or Base64 data URI at the top.
- Drop your image. For favicons, a square logo of at least 512 × 512 gives the best results.
- Favicons: choose Pad or Fill, add padding, and decide on a transparent or solid background. Preview every size at real scale.
- Download the ZIP (all PNGs, favicon.ico, site.webmanifest and the HTML tags), or individual files.
- Base64: copy the data URI, the CSS rule or the <img> tag. Tick “Re-encode” to strip metadata first.
How it works
Each icon size (16, 32, 48, 180, 192 and 512 px) is rendered from your original on its own canvas — never from a smaller icon — with stepwise halving for clean downscaling, then exported as PNG.
The .ico file is assembled byte by byte: a 6-byte header, one 16-byte directory entry per image (width, height, bit depth, byte length, offset) and the 16, 32 and 48 px PNGs stored inside. PNG-in-ICO is supported by current browsers and by Windows since Vista. The ZIP is written in “stored” mode (no extra compression, since PNGs are already compressed) with a CRC-32 checksum per file.
Base64 represents every 3 bytes as 4 text characters, so the encoded text is 4 × ceil(bytes / 3) characters — about 33% larger than the file.
Worked example
A 1.2 KB PNG icon becomes 4 × ceil(1200 / 3) = 1,600 characters of Base64 — small enough to inline in a stylesheet and save a request. A 90 KB hero photo would become 120 KB of text that the browser cannot cache separately or decode until the CSS has loaded, so it is better left as a normal file.
Limitations
- No SVG favicon is produced; if your logo is already an SVG, you can reference it directly with rel="icon" type="image/svg+xml".
- The manifest uses a placeholder app name (“My site”). Edit it before publishing.
- With metadata stripping off, Base64 contains the exact original bytes, including any EXIF or GPS data.
- Detailed artwork becomes unreadable at 16 px. Simplify the mark for small sizes if needed.
FAQ
Which favicon files do I actually need?
For most sites: favicon.ico (or a 32 px PNG), apple-touch-icon.png at 180 px, and the 192 and 512 px icons referenced from a web manifest. The generated HTML snippet wires them up.
Why is there a 48 px size?
Windows uses 48 px for some shortcuts, and Google's search guidelines ask for a favicon whose size is a multiple of 48 px. Including it covers both.
Why does my iPhone icon have a black background?
iOS does not support transparency in home-screen icons and fills it with black. Untick Transparent background and choose a brand colour for a cleaner result.
When should I use Base64 images?
For very small images — icons, tiny patterns, email signatures — where saving an HTTP request matters more than the 33% size increase. For anything larger than a few kilobytes, a separate file is usually faster.