Favicon Generator

What is a favicon generator?

A favicon generator takes a source image, or a short piece of text, and produces the small icon files a browser shows in a tab, a bookmark list, a phone home screen and a browser history entry. The output is not one file but several: a favicon.ico for the tab and legacy lookups, a handful of PNGs at fixed sizes for touch icons and home-screen shortcuts, and a JSON manifest that names the site for installable web apps. This tool builds all of them from either an uploaded image or typed text drawn straight onto a canvas, with a background colour, a text colour and a choice of square, rounded or circle shape.

The point of generating rather than hand-cropping is that each output size has different constraints, and a single 512-pixel export scaled down by the browser rarely looks right at 16 pixels. Building the set deliberately, and previewing it at the sizes it will actually appear at, catches that before the icon ships.

How to use it

1. Choose your source. Upload an image, or switch to text mode and type a single letter or an emoji. In text mode you also pick a background colour, a text colour, and whether the icon is drawn as a square, a rounded square, or a circle.
2. Check the preview at real sizes. The live preview renders the icon at 16, 32, 48 and 180 pixels side by side, which is what actually survives at tab size rather than what looks good enlarged. Add a site name here too, since it feeds directly into the web app manifest.
3. Download the files and copy the tags. Download the favicon.ico and the individual PNGs at 16, 32, 180, 192 and 512 pixels. Then use the two copy buttons to grab the HTML link tags and the manifest JSON, and paste both into your page.

What is actually inside a .ico file

An ICO file is not really an image format, it is a tiny archive. It opens with a six-byte header, followed by one sixteen-byte directory entry per image, and then the images themselves laid end to end. That structure is why a favicon can carry several sizes at once: the browser reads the directory and picks whichever entry it needs, so the 16-pixel tab icon and the 48-pixel shortcut icon can be genuinely different drawings, not the same drawing squashed to fit.

Each directory entry stores its width and height in a single byte, which caps the value at 255. Since a byte cannot represent 256, the format writes 256 as zero, and the reader is expected to know that a zero here means the largest common icon size rather than the literal number. This is a real quirk that shows up in files people actually ship, including the favicon this very site uses: read directly, it holds four entries, at 16, 32, 48 and 256 pixels, mixing raw bitmap payloads and PNG payloads in the same file.

That mixing is possible because, since Windows Vista, a directory entry's payload is allowed to be a complete PNG rather than a raw bitmap. That single change is what makes writing an ICO from a browser practical at all: a canvas element already produces PNG data, so the generator only has to place each PNG behind the right directory entry rather than encode a bitmap format from scratch. The declared size in the entry and the payload's real pixel dimensions are separate fields, and nothing in the format forces them to match, so this tool renders each layer at the exact size its entry declares before writing it in.

The output was checked against two independent readers that ship with macOS: file(1) identifies it as an MS Windows icon resource with the correct icon count and sizes listed, and sips recognises the format without complaint. Beyond that, 41 automated assertions cover the file, including that every embedded PNG comes back byte-for-byte identical after being written and read again, that entries are ordered smallest first, and that a 256-pixel entry survives the zero-byte round trip correctly.

Honest limitations

A 16 by 16 icon is 256 pixels in total, and fine detail simply does not survive that. A logo with thin strokes, a gradient or small type will blur into a smudge at tab size no matter how good the source file is, so the honest fix is to simplify the mark for this use rather than expect the generator to rescue detail that was never going to fit. That is also why the preview shows the 16-pixel version rather than only a large one: it is the size that matters most and the one most likely to disappoint.

The favicon.ico this tool writes uses PNG payloads, which is what every reader from the last decade and a half expects, but software old enough to predate Windows Vista may still expect raw bitmap payloads instead and could fail to read it. This is very unlikely to affect a real visitor's browser today, but it is worth stating rather than pretending the format has no history.

The tool downscales whatever image you give it; it does not redesign it. If a source logo needs cropping, recolouring or simplifying to read well small, that is a design decision this tool cannot make for you. Transparency is preserved faithfully in every file produced, but what a browser, an operating system or a phone home screen then does with that transparency — such as compositing it onto a background colour or clipping it to rounded corners — is a decision made by that platform, not by the file. Finally, re-encoding an image through a canvas strips whatever metadata the original file carried, the same trade the image converter makes.

Why is it free?

This tool runs entirely in the browser: the image or text you provide is drawn to a canvas, resized, and packed into the output files on your own device, and none of it is uploaded anywhere. That is also why it can be free without a catch. There is no server-side processing to pay for per use, so there is nothing to meter, no account to create, and no watermark added to justify a paid tier.

FreeToGenerate.com is a collection of tools built the same way: run client-side wherever the task allows it, state plainly what the code does and does not do, and let that be the whole pitch.