Favicon Generator, Free and In-Browser

Six files, and what each one is for

A favicon stopped being one file somewhere around 2011, when phones started putting websites on home screens. The set below is what a site actually needs in 2026, and it is deliberately shorter than what most generators hand you.

favicon.ico — one container holding 16, 32 and 48 pixel versions. Browsers request this from the site root on their own, without being told to.
favicon-32x32.png and favicon-16x16.png — what a modern browser prefers for the tab when you point it at them.
favicon-48x48.png — useful when something wants a single mid-size PNG rather than reading the ICO.
apple-touch-icon.png at 180×180 — iOS reads this when a page is saved to the home screen. Give it a solid background: iOS composites a transparent icon onto white or black depending on the wallpaper, and the result is unpredictable.
android-chrome-192x192.png and android-chrome-512x512.png — referenced from the manifest, used for the Android home screen and the splash screen.
site.webmanifest — a small JSON file naming the site and listing those two icons.

The markup, line by line

Five lines go in the <head> of every page, and the tool writes them out ready to paste. What they mean:

The first rel="icon" points at the ICO and declares it as 32×32. That size attribute is a hint, not a constraint — the file holds three sizes and the browser still picks from all of them.
The next two offer the PNGs at their exact sizes. A browser that would rather have a PNG takes one of these; one that would rather have the ICO ignores them.
rel="apple-touch-icon" is read by iOS. There is no sizes attribute because one 180-pixel icon covers every current device.
rel="manifest" hands Android and installable web apps the JSON file, which is where the two large PNGs are declared. They do not need <link> tags of their own.

Order matters slightly: browsers generally take the last declaration they understand, so leaving these in the order given is the safe move.

Design for 16 pixels, not for 512

This is the part no generator can do for you, and it is the difference between a favicon that reads and one that is a coloured smudge in the tab. A 16-pixel square holds 256 pixels in total. That is roughly the amount of detail in one letter of body text, and it has to carry your entire identity at a size the reader is not looking directly at.

The practical rules are short. Use the mark, not the wordmark — three letters is already too many. Drop thin strokes, because a one-pixel line at 16 becomes a grey blur once it is anti-aliased. Increase the contrast between the mark and its ground beyond what looks right at full size. And check it against both a light and a dark tab bar, since a dark navy monogram on a transparent ground vanishes completely in dark mode.

Two controls here help. Breathing room insets the mark so it is not jammed against the edges of a surface that will put a title immediately beside it. Pad to fit against crop to fill decides what happens to a source that is not square: padding keeps the whole mark and renders it smaller, cropping fills the square and cuts the ends off. Padding is the default because losing part of a logo is the worse failure.

Where the files go

All of them belong at the root of the domain, so that favicon.ico answers https://example.com/favicon.ico. Browsers have requested that exact path since before the <link> tag existed and still do, which means a site without a file there collects a 404 on every first visit even when the markup is perfect.

Then expect the change to take a while to appear. Favicons are cached far more aggressively than the pages that reference them, and a hard refresh often will not shift one. Testing in a private window is the quickest way to see the new icon; on a live site, waiting is usually the answer.

Three things this tool leaves out on purpose

A generator that emits a file you cannot check is worse than one that tells you it is missing.

The Safari pinned-tab SVG. It has to be a single-colour vector with every path filled black, and deriving one by tracing a raster produces a shape that is close but not right. Draw it by hand if you use it.
A maskable Android icon. The maskable format assumes the outer edges will be cropped to whatever shape the launcher uses, so it needs artwork drawn with that safe zone in mind. Re-cropping an existing icon to fake it just makes a smaller icon.
browserconfig.xml. This was for the Windows 8 tile. Nothing reads it now, and generators that still emit it are shipping you a dead file.

If all you need is the container itself rather than the full set — converting an existing mark, or picking exactly which sizes go inside it — the PNG to ICO converter exposes the size list directly and explains what belongs in one.

Why nothing is uploaded

Your image is decoded by the browser, resized on a canvas, encoded to PNG at each size, packed into an ICO container and a ZIP archive written byte by byte on this page, and handed back to you. No server sees it, there is no queue, and no copy of an unreleased identity ends up on someone else’s disk. Load this page once and it keeps working with the network switched off.

Free tools

Designing a site? Siter.io builds it from Figma.