What's actually inside a favicon.ico

2026-09-19

Every site has that little icon in the browser tab, and sooner or later every site owner has to produce one. The file format it usually travels in — .ico — is one of the odder survivors on the web, and knowing what is inside it makes the job make sense.

One file, several icons

An ICO file is a container: it holds the same image at several sizes at once, and the software displaying it picks whichever size fits the spot. A browser tab takes a small one, a bookmark bar or pinned shortcut reaches for a bigger one. Our favicon maker packs 16, 32 and 48 pixel versions into a single file — the sizes those everyday spots actually use.

Why not ship just one large icon and let everything scale it down? Because scaling to 16 pixels on the fly is exactly where fine detail turns to mush. Packing pre-rendered sizes means each spot gets an image made for its own dimensions.

What happens to your image on the way in

Icons are square; your source image may not be. A non-square image is centre-cropped to a square first — the tool tells you when that happened — and then rendered down to each size. Detail-heavy images lose their detail at 16 pixels, which is not a tool problem but a physics one: bold, simple shapes survive; thin lines and small text do not. If your logo has a compact mark or monogram version, feed that in rather than the full wordmark.

Where the file goes

Name it favicon.ico and put it at your site root, or reference it with a <link rel="icon"> tag. Browsers also accept PNG and SVG icons via that tag these days, but the plain .ico at the root remains the one option that everything — including old software and bookmark importers — knows how to find.

What we deliberately don't do

We don't generate the whole app-icon zoo — touch icons, maskable icons, tile images — each of which has its own platform rules. This tool does the browser favicon and does it completely.

The short version

• .ico is a container holding several sizes; software picks the one that fits.
• Ours packs 16, 32 and 48 px — the sizes tabs and bookmarks actually use.
• Non-square images are centre-cropped; simple bold marks survive 16 px, detail doesn't.
• Serve it as /favicon.ico at the site root for maximum compatibility.