Favicon Generator Guide: Sizes, Formats & How to Make One Free

A favicon is the tiny icon that shows up in a browser tab, a bookmark, a history list, and on a phone home screen when someone saves your site. It is small, but it is one of the first things that makes a site look finished rather than default. The tricky part is that modern browsers and devices ask for several sizes and formats, not just one. This guide explains what you actually need and how to generate a complete set in your browser.

What sizes do you need?

You do not need dozens of files, but a handful of sizes cover almost everything:

16×16 and 32×32 — the classic browser-tab and bookmark sizes.
48×48 — used by some Windows and desktop contexts.
180×180 — the Apple touch icon shown when an iPhone or iPad user adds your site to their home screen.
192×192 and 512×512 — used by Android and Progressive Web App installers, including the splash screen.

Generate these from one high-resolution square source (512×512 or larger) so every size is sharp rather than upscaled from something tiny.

Which format: ICO, PNG, or SVG?

PNG is the practical default for most sizes — it is crisp, supports transparency, and every browser handles it. ICO is the legacy multi-resolution format that older setups still expect at /favicon.ico; it can bundle several sizes in one file, which is why many sites still ship it for maximum compatibility. SVG is the newest option: a single vector file that scales perfectly to any size and can even adapt to dark mode, supported by current versions of Chrome, Firefox, and Safari — though you should still provide PNG/ICO fallbacks for older clients.

How to generate a favicon

Open the Favicon Generator, then:

Upload a square source image (a logo or mark works best; detailed photos lose clarity at 16×16).
Generate the standard sizes (16, 32, 48, and the larger touch/PWA icons).
Download the set and add the files to your site, referencing them in your HTML <head>.

The icons are generated in your browser, so your source image is processed on your device rather than uploaded to a server.

Design tips for a tiny canvas

At 16×16 there is room for one simple shape, not a full logo with text. Use a bold, high-contrast mark, keep padding minimal, and test it against both light and dark tab backgrounds. If your full logo is too detailed, make a simplified icon version (just the symbol or the first letter) specifically for the favicon. If your source has a background you do not want, remove it first with Remove Background so the icon sits cleanly on any tab colour.

Common mistakes to avoid

Starting from a small image — upscaling a 64×64 logo to 512 looks blurry; start large.
Cramming in text — words are unreadable at favicon size; use a symbol.
Only providing 16×16 — phones and PWA installers need the larger touch icons too.
Forgetting the HTML links — generating the files is not enough; you must reference them in the page head.

Need to prep the source first? Use the image converter to get a clean PNG, then generate the set. For more, see all image tools.

Frequently Asked Questions

What favicon sizes do I actually need?

At minimum 16x16 and 32x32 for browser tabs and bookmarks, plus 180x180 for the Apple touch icon and 192x192 and 512x512 for Android and Progressive Web App installers. Generate them all from one large square source so each is sharp.

Should I use ICO, PNG, or SVG for my favicon?

PNG is the practical default for most sizes. ICO is the legacy multi-resolution format older setups expect at /favicon.ico. SVG is a single scalable file supported by current browsers, but provide PNG/ICO fallbacks for older clients.

What image should I use as the source?

A simple, high-contrast square logo or symbol at 512x512 or larger. Detailed photos and text become unreadable at 16x16, so use a bold mark, and consider a simplified icon-only version of your logo for the favicon.

Is my image uploaded when I generate a favicon?

No. The Favicon Generator runs in your browser, so your source image is processed on your device and the icon files are offered for download without being sent to a server.

Why doesn't my favicon show up after I add it?

Usually because the files were generated but not referenced in the page head, or the browser cached the old icon. Add the correct link tags in your HTML head and hard-refresh or clear the cache to see the new favicon.

Found this useful? Share it with others.

Post Share Email

Try these tools