Favicon ICO Generator

How to use it

1. Choose a PNG or SVG source file. A square source gives the cleanest result; other shapes are centre-cropped.
2. Click Build favicon.ico. The three sizes appear as previews with their sizes underneath.
3. Download favicon.ico and put it in your site root, or wherever your build expects it.
4. Download apple-touch-icon.png (180x180) for iOS home screen icons.
5. Copy the HTML snippet, which lists the sizes to declare in your document head and manifest.

Common use cases

• One file for every browser - an ICO holding three sizes is what most browsers still ask for at the site root, even when you also serve PNG icons.
• Filling the /favicon.ico fallback - browsers request it whether or not you declared it, so shipping a real one avoids a 404 in your logs.
• Adding an Apple touch icon - iOS uses its own 180x180 PNG rather than the ICO.
• Documenting the icon set - the snippet records which sizes you still need to produce for the manifest.
• Regenerating after a logo change - rebuild every size from a single source file in one click.

Why it stays private

The image is decoded and re-encoded with the Canvas API in your browser. It is never uploaded, so unreleased logos, brand assets and internal icon sets stay on your device.

FAQ

Q: How is this different from the favicon generator that outputs PNG sizes? A: The other tool exports separate PNG files at each size. This one packages 16x16, 32x32 and 48x48 into a single .ico container, which is the format browsers expect at /favicon.ico, and adds the 180x180 Apple touch icon PNG. Use that tool for the PNG set your manifest references.

Q: Can I put larger sizes such as 256x256 inside the ICO? A: This tool stays at 16, 32 and 48 px because those cover favicon rendering. The ICO format stores 256 as a zero byte value, and PNG sources are usually preferred for icons that large anyway.

Q: Why are the PNG entries used instead of BMP entries? A: PNG entries keep the alpha channel and produce a much smaller file, and every current browser reads PNG entries inside an ICO. BMP entries would need a separate AND mask and would be several times larger.

Q: The ICO did not change after I edited my SVG. What happened? A: The file input only re-runs when a new file is selected. Pick the updated file again and the ICO is rebuilt, since an ICO is a snapshot of the source at build time.