Favicon Generator

Turn one image into the favicon sizes a modern site actually uses: 16, 32, 48, 180, 192 and 512 px, with the matching link tags. Runs in your browser, nothing is uploaded.

Input

0–30% inset, for marks that run to the edge.

Common settings

Drop in a logo and this tool draws it into the six icon sizes a current site actually references — 16, 32 and 48 for the browser tab and the Google result, 180 for Apple's touch icon, and 192 and 512 for the web app manifest — then hands you the <head> markup and the manifest entries to go with them. Everything is rendered on a canvas in your own browser, so the image is never uploaded, and you can flatten transparency onto a background or add breathing room around the mark before exporting.

What a favicon set is for

A favicon is the small image a browser shows on the tab, in bookmarks and in the history list; Google also displays one next to your result on mobile search. One file is no longer enough, because the same mark now appears at 16 px on a tab and at 512 px on an Android home screen, and a single image scaled by the browser looks muddy at one end or wasteful at the other. This tool renders each size separately from your source, so every icon gets its own clean downscale, and outputs PNG throughout — the format every current browser accepts.

How the favicon generator works

Your image is decoded once, then drawn separately into a canvas for each target size — 16, 32, 48, 180, 192 and 512 pixels. Every icon is therefore a downscale of the original rather than a resample of an already-shrunk copy, which is what keeps small sizes from turning mushy. The draw preserves aspect ratio and centres the result, so a wide wordmark is letterboxed instead of squashed, and an optional inset gives marks that run to the edge some breathing room. Each canvas is encoded as PNG: lossless, alpha-capable, and read by every current browser. Google's guidance asks for a square icon that is a multiple of 48, which is why 48 and 192 are in the set.

Features

Six sizes covering the browser tab, Google's search result icon, Apple touch and the web app manifest.
Each size is drawn from the original rather than resampled from a smaller icon.
Aspect ratio preserved and centred, so a non-square logo is never stretched.
Ready-to-paste <head> markup and manifest icon entries alongside the files.

How to generate your icons

1

Select a source image — square and at least 512 × 512 gives the sharpest result.

2

Choose whether to keep transparency or flatten it onto white or black.

3

Add padding if your mark runs to the edge and needs breathing room.

4

Run the tool, download each size, and paste the markup into your <head>.

Common mistakes

Starting from a small source: a 64 × 64 logo upscaled to 512 will look soft, and no tool can add detail that was never captured.
Using a detailed, wordy logo: at 16 px the text is unreadable, so a favicon almost always needs a simplified mark rather than the full lockup.
Leaving transparency in an icon that sits on a dark browser theme: a dark logo on a transparent background disappears, so flatten it onto a background that contrasts.

Examples

A 1024 × 1024 square logo → all six sizes downscaled cleanly, transparency intact
A wide 800 × 200 wordmark → centred inside each square with transparent bars above and below, never stretched
A dark monogram with 10% padding flattened onto white → stays legible on both light and dark browser tabs

See also

  • Image Resizer — Source not square? Resize or crop it to a square before generating the set.
  • Image Format Converter — Starting from a JPEG logo? Convert it to PNG first so the icons keep clean edges.

FAQ

Do I still need a favicon.ico file?

Only if you still support Internet Explorer. Every browser released in the last decade reads PNG favicons declared with a link tag, which is why this tool outputs PNG. A favicon.ico remains harmless to keep at your site root if you already have one, since browsers request that path by default when no link tag is present.

Why six sizes instead of one?

Because the same mark is displayed at wildly different scales. 16 and 32 px go on the browser tab, 48 px is the size Google's indexer prefers for the icon beside your mobile search result, 180 px is what iOS uses when someone adds your site to their home screen, and 192 and 512 px are the sizes a web app manifest points at. Rendering each one from the source keeps them all sharp.

Is my logo uploaded to a server?

No. The image is read by your browser, drawn onto a canvas and exported in the page itself. Nothing crosses the network, so an unreleased logo stays on your machine.

What size should my source image be?

Square and at least 512 × 512. That way the largest icon is a straight copy and every smaller one is a downscale, which is the direction that preserves detail. If your source is smaller, the tool still works but tells you which sizes had to be upscaled.