How I Built a Free Favicon Generator for the Browser

Every website needs a favicon — that tiny icon in the browser tab — yet making one properly means producing half a dozen files in different sizes and formats. I built a free favicon generator that does the whole job in your browser: drop in one logo, and it hands back a complete favicon package with no upload, no sign-up, and no server ever seeing your file.

Why does one website need so many icon files?

One website needs several icon files because every platform asks for a different size: browser tabs use 16 and 32 pixels, retina displays want 32, iPhones ask for a 180-pixel home-screen icon, and Android wants 192 and 512-pixel icons for install prompts and splash screens. A single file cannot serve all of them crisply.

The favicon itself is older than most of the web we use today. Favicons first appeared in Internet Explorer 5, released in March 1999, when Microsoft added a small icon next to bookmarked sites — the word itself is a blend of “favorite” and “icon” (Wikipedia). What started as one 16-pixel file has grown into a package, and that growth is exactly the chore the generator removes.

What is inside a favicon.ico file?

A favicon.ico file is a small container holding several images at different sizes inside one file, so the browser can pick the sharpest size for wherever the icon appears. The generator builds an ICO with three PNG-compressed entries — 16, 32 and 48 pixels — written by hand in code.

The format is simple once you see it: a six-byte header, a sixteen-byte directory entry per image, and then the raw PNG data for each size. Keeping the entries PNG-compressed, rather than old-style bitmap data, keeps the file small while staying compatible with every browser. Many tools still request favicon.ico directly even when a site also offers a modern SVG icon: RSS readers, chat unfurlers, older browsers and some crawlers all look for it. Skipping the ICO file is the most common reason a site shows a blank tab icon somewhere, even though it looks fine in the developer's own browser.

How do you turn a logo into icons without a server?

You turn a logo into icons without a server by doing the image work in the browser itself, using the canvas element that every modern browser ships with. The generator loads your image, draws it onto an off-screen canvas at each target size, and reads each canvas back out as a PNG file.

The sizes it renders are 16, 32, 180, 192 and 512 pixels, plus the three sizes packed into the ICO file. The original file is never uploaded anywhere; it is only drawn from, and it stays untouched on your own device. This is the same privacy-first pattern behind the rest of ToolsOfWeb: the work happens on hardware you control, so there is nothing to leak, no queue to wait in, and no account to create. If you close the tab mid-generation, nothing of yours remains behind, because nothing ever left the tab in the first place.

Why does the tool crop non-square logos?

The tool crops non-square logos because favicons must be square, and a wide logo squeezed into a square frame would look stretched and wrong. The generator center-crops the image to a square before resizing, so the middle of your logo — usually the mark itself — survives at every size.

For the best result, start with a square logo at 512 by 512 pixels or larger, with a little padding around the mark so nothing important touches the edge. If your logo is a wide wordmark rather than a square mark, the honest advice is to use just the symbol part of it for the favicon. A tiny tab icon cannot carry a full wordmark anyway: at 16 pixels, letters turn to mush, while a simple shape stays readable.

What is a web app manifest, and why generate one?

A web app manifest is a small JSON file telling Android devices and browsers how your site should behave when someone adds it to their home screen: its name, its theme colour, and which icons to use. The generator writes one for you, pointing at the 192 and 512-pixel icons it just created.

Standalone display means the saved site opens like an app rather than a browser tab. The generator also prints the exact HTML snippet to paste into your pages: the ICO link, the SVG link when your logo is a vector file, the Apple touch icon link, the manifest link, and the theme-colour meta tag. Copying five lines of HTML beats hunting through documentation for which link tag each platform expects, and it removes the classic mistake of generating the files but forgetting to reference them.

How do I install the favicon package on my website?

You install the favicon package by downloading the ZIP, uploading its files to your website's root folder, and pasting the snippet into the head of your pages. The ZIP holds every file at once: favicon.ico, the PNG icons, the Apple touch icon, the Android icons, the manifest, and the SVG version when your source is a vector.

On WordPress, the same result comes from Customizer, then Site Identity, then Site Icon, instead of editing HTML. One practical warning: browsers cache favicons aggressively, so after installing, your own browser may keep showing the old icon (or none at all) for a while. Test in a private window, or clear the cache for the site, before concluding the install failed. The files are almost always fine — it is the cache lying to you.

FAQs