Favicon Generator

What is a favicon generator?

A favicon generator turns an image into the small square icon that shows in a browser tab, bookmark, or phone home screen. This tool takes a picture you choose, resizes it to a square favicon PNG at the size you pick — 16, 32, 48 or 180 px — and downloads it. Square logos work best, because the output is always a square. For a full favicon set you generate each size you need, one at a time.

Everything runs locally in your browser using an HTML canvas, so the image is never uploaded to a server. That makes it a fast, private way to create the icon for a website, web app, or browser extension without installing anything or signing up.

What does this tool do?

You choose an image, select one of four sizes (16, 32, 48 or 180 px), and the tool draws your picture into a square canvas of that size and downloads it as a PNG. The file is named for its dimensions, so a 32 px icon downloads as favicon-32x32.png.

Each size has a clear job. The 16 × 16 and 32 × 32 icons are the classic browser-tab favicons. 48 × 48 is a slightly larger tab and shortcut icon some platforms prefer. The 180 × 180 option creates an Apple touch icon — the bigger square iOS uses when someone adds your site to their home screen. Because the canvas is square, a square source image fills it perfectly; a non-square image gets squeezed to fit.

How does it work?

The method is a square canvas resize, not a number you calculate. Here is the exact sequence:

1. Load the image. The browser reads the file you chose and loads it at its natural pixel size.
2. Make a square canvas. The tool creates an HTML canvas whose width and height both equal the size you picked — so 32 px gives a 32 × 32 canvas, and 180 px gives 180 × 180.
3. Draw and fit. It draws your image into that square with drawImage, scaling it to fill the canvas. A square source maps in cleanly; a wide or tall source is compressed into the square.
4. Export and download. The canvas is converted to a PNG blob and downloaded, named for its size — for example favicon-32x32.png.

A few terms, defined. A favicon (“favorite icon”) is the tiny graphic a browser shows for your site in tabs, history, and bookmarks. Pixels (px) are the dots that make up the icon, so a 32 px favicon is 32 dots wide by 32 dots tall. An Apple touch icon is the larger 180 × 180 version iOS uses for home-screen shortcuts. Because every output is square, your source should be square too.

Examples

Each example matches exactly what the widget does — resize the chosen image into a square PNG at the selected size and download it.

Example 1 — a square logo at 32 × 32. You choose a square logo and pick the 32 px size. The tool draws it into a 32 × 32 square canvas and downloads favicon-32x32.png, the standard browser-tab icon. Because the source was square, it fills the icon with no distortion.

Example 2 — the same logo at 16 × 16. Keep the same square logo and pick 16 px instead. You get a crisp favicon-16x16.png for the smallest tab slot. Fine detail in a logo can become hard to read this tiny, so a simple, bold mark reads best at 16 px.

Example 3 — an Apple touch icon at 180 × 180. Choose 180 px and the tool produces a 180 × 180 square PNG — the Apple touch icon for home-screen bookmarks. This is the icon iOS displays when someone saves your site to their home screen, so it should look sharp at that larger size.

Example 4 — building a favicon set. You need several sizes, so you generate each one you need in turn: run 16, then 32, then 48, then 180 px. You end up with four named PNGs — favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, and a 180 × 180 Apple touch icon — ready to drop into your site.

Favicon size reference

This table shows what each size option produces and where it is used. Every output is a square PNG named for its dimensions.

Size you pick	Output PNG	Square	Typical use
16 px	favicon-16x16.png	16 × 16	Smallest browser-tab and history icon
32 px	favicon-32x32.png	32 × 32	Standard browser-tab favicon
48 px	favicon-48x48.png	48 × 48	Larger tab and shortcut icon
180 px	180 × 180 PNG	180 × 180	Apple touch icon for home-screen bookmarks

For most sites, the 32 × 32 tab icon plus a 180 × 180 Apple touch icon covers the common cases; add 16 × 16 for older browsers if you want full coverage.

Common uses

A favicon is a small detail that makes a site look finished, and this tool covers the usual jobs:

• Website branding — give your site a real tab icon so it stands out among a row of open tabs.
• Web apps and dashboards — set a recognizable icon for tools people keep pinned all day.
• Home-screen shortcuts — generate the 180 × 180 Apple touch icon so a mobile bookmark shows your logo.
• Extensions and prototypes — quickly make square icons for a side project without a design tool.

Tips and common mistakes

A few details get you a clean, sharp favicon:

• Start from a square image. The output is always square, so a square source fills the icon without distortion. A wide or tall image gets squeezed and looks off.
• Keep the mark simple. At 16 × 16 and 32 × 32 there is very little room. A bold, simple symbol reads far better than detailed text or thin lines.
• Generate each size you need. This tool makes one size per download, so for a set you run 16, 32, 48 and 180 px in turn rather than getting them all at once.
• Use a high-resolution source. Feeding in a large, crisp logo and scaling it down looks sharper than starting from an already-tiny image, since scaling up adds no new detail.
• Add the right link tags. The PNGs are the easy part — remember to reference them in your HTML (a standard favicon link plus an apple-touch-icon link) so browsers actually use them.

Limitations and notes

This generator outputs PNG favicons at the four fixed sizes (16, 32, 48 and 180 px) and always produces a square icon, so it does not crop or pad a non-square image — it scales the picture to fill the square. It does not build a multi-resolution .ico file or write the HTML link tags for you; you add those yourself. It accepts any image your browser can read (PNG, JPG, and similar) and outputs one file per size, so a full set means running each size you need.

Most importantly, the whole process runs privately in your browser. Your image is loaded locally and redrawn on an HTML canvas in JavaScript — it is never uploaded, logged, or stored, which makes it safe for unreleased logos and usable offline once the page has loaded.

To prepare or convert your logo first, pair this with the JPG to PNG converter, the PNG to JPG converter, the image resizer, and the image compressor, and browse the full Image & PDF tools collection.