What size image should I start with?

A square PNG at 512×512 or larger. Every smaller size is rendered down from it, and starting large means the small versions stay clean. Starting from a 64×64 image and scaling up produces soft icons at every size above it.

Does my source image have to be square?

Yes, in practice. Icons are rendered into square canvases, so a rectangular source will be distorted. Crop it to a square before you start.

Why isn't my favicon showing up?

Usually caching. Browsers cache favicons aggressively and often ignore a normal page refresh. Try a hard reload, a private window, or visiting the icon file directly by URL. If the file loads there, the icon is fine and the cache will catch up.

Will a detailed logo work?

Rarely. At sixteen pixels square there is room for a letter, a simple mark or a strong silhouette, and nothing else. Detail that reads well on a business card turns to mush. Design for the smallest size and let the larger ones benefit.

Is my image uploaded?

No. Every size is rendered in this browser tab. The Uploaded readout beside the result measures the page's own outbound network traffic, so a successful generation reads 0 B.

Does it support transparency?

Yes. PNG icons keep their alpha channel, which matters because browser tabs and home screens have backgrounds you do not control.

Will there be a watermark or a limit?

No watermark, no limit, no account. There is no server to pay for, so there is nothing to ration.

Generate a favicon set

One image in, every size a browser asks for out — plus the HTML. Generated on your own machine.

Ready6 sizes generated

Uploaded0 B

What next

How do I make a favicon for my website?

To generate a favicon, drop a square image onto this page and download the complete set of sizes browsers and devices expect, along with the HTML to link them. Everything is generated in your browser, so the image is never uploaded and no account is needed.

How to do it

Start with a square image. A PNG at 512×512 or larger is ideal. Anything non-square will be distorted, so crop it first.
Drop it onto the panel. Every required size is rendered locally from that one source image.
Download the set. You get the icon files packaged together, ready to drop into your site's root.
Add the HTML. Copy the provided link tags into the head of your pages so browsers and devices know which file to use where.

At a glance

Where it runs	In this browser tab. The file is not uploaded
File size limit	None imposed — your device memory is the ceiling
Cost	Free
Account needed	No
Watermark	None
Works offline	Usually after first use, but not guaranteed — there is no offline app

Why one image is not enough

A favicon is not a single file any more. Different contexts ask for different things: a browser tab wants a small icon, a bookmark bar a larger one, an iOS home screen shortcut a much larger one, and Android something different again.

Supply only a 16×16 and every other context has to scale it up — which looks exactly as bad as it sounds. Supply a full set and each context gets a purpose-made image.

This page renders all of them from one source and gives you the HTML to link them.

Start large and square

Square. Icons are rendered into square canvases. A rectangular source will be squashed to fit, so crop before you start.

Large. A PNG at 512×512 or bigger. Every smaller size is rendered down from it, and downscaling produces clean results in a way upscaling never does.

Design for sixteen pixels

This is the part most people get wrong.

At 16×16 there is room for a single letter, a simple geometric mark, or a strong silhouette. That is all. A detailed logo — one with a wordmark, fine lines, or several colours — becomes an unreadable smudge at tab size, no matter how good the source image is.

The practical approach is to design the smallest version first and let the larger sizes inherit from it, rather than shrinking a logo and hoping.

Why isn’t my favicon updating?

Almost always caching. Browsers cache favicons far more aggressively than other assets and frequently ignore an ordinary refresh.

Before concluding anything is broken:

Hard reload the page
Try a private window
Visit the icon file directly by its URL

If the file loads correctly when you visit it, your icon is fine — the cache will catch up on its own.

Where the files go

The root of your site, unless you deliberately change the paths in the link tags. Some browsers request /favicon.ico from the root regardless of what your HTML says, so keeping everything there avoids a class of problem entirely.

You still need the link tags. Root-level fallbacks cover the basic case, but the larger and platform-specific icons are only discovered through the HTML.

Nothing is uploaded

Every size is rendered inside this browser tab. The Uploaded readout beside the result measures this page’s own outbound network calls, and reads 0 B on a successful generation.

Questions

What size image should I start with?: A square PNG at 512×512 or larger. Every smaller size is rendered down from it, and starting large means the small versions stay clean. Starting from a 64×64 image and scaling up produces soft icons at every size above it.
Does my source image have to be square?: Yes, in practice. Icons are rendered into square canvases, so a rectangular source will be distorted. Crop it to a square before you start.
Why does a favicon need so many sizes?: Because different contexts request different files. A browser tab uses a small icon, a bookmark bar a slightly larger one, an iOS home screen shortcut a much larger one, and Android a different one again. Supplying each size means every context gets a purpose-made image rather than a scaled guess.
Why isn't my favicon showing up?: Usually caching. Browsers cache favicons aggressively and often ignore a normal page refresh. Try a hard reload, a private window, or visiting the icon file directly by URL. If the file loads there, the icon is fine and the cache will catch up.
Where do the files go?: The root of your site, alongside your index page, unless you change the paths in the link tags. Some browsers request /favicon.ico from the root regardless of your HTML, which is why keeping them there is the path of least resistance.
Do I still need the HTML if the files are in the root?: Yes. Root-level fallbacks cover the basic case, but the larger and platform-specific icons are only found through the link tags. Add them.
Will a detailed logo work?: Rarely. At sixteen pixels square there is room for a letter, a simple mark or a strong silhouette, and nothing else. Detail that reads well on a business card turns to mush. Design for the smallest size and let the larger ones benefit.
Is my image uploaded?: No. Every size is rendered in this browser tab. The Uploaded readout beside the result measures the page's own outbound network traffic, so a successful generation reads 0 B.
Does it support transparency?: Yes. PNG icons keep their alpha channel, which matters because browser tabs and home screens have backgrounds you do not control.
Will there be a watermark or a limit?: No watermark, no limit, no account. There is no server to pay for, so there is nothing to ration.

Sources

Image file type and format guide — MDN Web Docs
Portable Network Graphics (PNG) Specification, Third Edition — W3C