Online Tool Store
Favicon Generator
Turn one image into a real multi-size favicon.ico plus every PNG modern browsers and phones expect, with the HTML to paste. Runs in your browser.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
PNG, JPEG, WebP, SVG, or AVIF. At least 512×512 gives the best result — a small image cannot be sharpened by enlarging it.
Apple touch icons ignore transparency, so a solid background usually looks better there.
No image yet — choose one and every favicon size is generated here.
How it works
- Choose a square image, ideally 512×512 or larger. It stays on your device.
- Optionally fill transparency with a colour — worth doing for the Apple touch icon.
- Every size is generated at once, including a real multi-size favicon.ico.
- Download the set, then paste the supplied <link> tags into your <head>.
What an .ico file actually is
An icon file is not one image — it is a small archive with a directory at the front, and this tool writes that structure itself:
6-byte header (reserved, type, image count)
16 bytes per image (width, height, bit depth, length, offset)
then the image data, one block after another
Modern icon files are allowed to hold PNG data directly rather than raw bitmaps, which every browser and Windows from Vista onwards understands. That is what makes this possible in a browser: each size is rendered to a PNG, and the directory records simply point at those bytes. It also keeps the file small — a three-size icon typically lands well under 10KB, where the old bitmap format would be several times that.
One quirk worth knowing if you ever read these files yourself: the width and height fields are a single byte each, so 256 is written as zero. A reader that takes the value literally reports a 256px icon as 0×0.
Why so many separate files
Each one exists for a platform that will not use the others:
- favicon.ico — requested from your domain root automatically, even with no HTML pointing at it.
- favicon-32x32.png — what most browsers actually display in the tab today.
- apple-touch-icon.png (180px) — iOS home screen; alpha is ignored, so give it a background.
- icon-192.png — Android home screen shortcut.
- icon-512.png — the splash screen when a PWA launches.
Non-square artwork is letterboxed rather than stretched, so a wide logo keeps its proportions with space either side instead of being squashed into a square. Scaling uses high-quality smoothing, though no amount of it rescues detail that was never in the original.
FAQ
Is my logo uploaded anywhere?
No. Every size is drawn on a canvas in this page and the .ico file is assembled byte by byte in your browser. Nothing is uploaded — which matters when the logo belongs to a brand that has not launched yet.
Why does favicon.ico contain three images?
Because different places ask for different sizes, and letting the browser pick from a set beats making it shrink one. 16px is the browser tab, 32px is the tab on a high-DPI screen, and 48px is the Windows taskbar and desktop shortcut. One file covers all three.
Do I still need an .ico file in 2026?
Yes, for one specific reason: browsers request /favicon.ico from the root of your domain automatically, even with no HTML pointing at it. That request happens for bookmarks, RSS readers, and other tools too, so having the file avoids a stream of 404s regardless of what your markup says.
What size should my source image be?
At least 512×512, and square. Everything is scaled down from your original, and downscaling looks good while upscaling never does — feed it a 64px logo and the 512px PWA icon will be visibly soft. The tool warns you if your image is small.
Why fill in transparency for the Apple icon?
Because iOS ignores the alpha channel on home screen icons and composites them onto black, so a transparent logo can come out as a dark smear. Ticking the background option gives you a solid colour behind the artwork, which is what Apple's own guidance expects.
Where do the files go?
In your site root, so /favicon.ico and /apple-touch-icon.png resolve, then paste the provided <link> tags into your <head>. Both of those two filenames are also looked for automatically at the root even without markup.
How we compare
| Feature | Online Tool Store | Upload-based favicon sites | Exporting sizes by hand |
|---|---|---|---|
| Your logo never leaves your device | ✓ | ✗ | ✓ |
| Real multi-size .ico, not a renamed PNG | ✓ | ✓ | Most editors cannot write .ico |
| Ready-made <link> tags | ✓ | ✓ | ✗ |
| No sign-up, no watermark, no email | ✓ | Varies | ✓ |
| Downloads everything as one ZIP | ✗ | ✓ | ✗ |
| Editable design, padding, and rounded corners | ✗ | Some offer an editor | ✓ |
The point of doing this in the browser is that an unreleased logo never touches someone else's server, and you still get a genuine multi-size .ico rather than a renamed PNG. There is no ZIP and no design editor — files download one at a time, and any padding or rounding should be done in your image editor first.