Favicon Generator

About this tool

This generator takes one image and redraws it as five square PNG files — 16×16, 32×32, 48×48, 180×180 and 512×512 pixels — using the browser's Canvas API. Each size gets its own preview and download button, and the files are named favicon-16x16.png, favicon-32x32.png and so on. Nothing is uploaded: the image is read and resized on your own device.

How to use the Favicon Generator

1. Choose a square source image — 512×512 or larger gives the sharpest results.
2. Review each generated size in the results grid.
3. Download the sizes you need one at a time and add them to your site's HTML or manifest.

What each size is for

• 16×16 — the classic browser-tab and bookmark icon on standard-density screens.
• 32×32 — the tab icon on high-density (Retina/HiDPI) displays, where a 16-pixel slot is drawn with twice as many physical pixels, and in some taskbar and shortcut contexts.
• 48×48 — a mid-size icon for places that show a larger site icon, such as shortcuts. Google Search requires a square favicon and recommends one larger than 48×48, so it is worth linking one of the bigger files as well.
• 180×180 — the Apple touch icon, shown when someone adds your site to an iPhone or iPad home screen. Apple's Safari documentation lists 180×180 for Retina iPhones and says the most appropriate available size is used on each device.
• 512×512 — the large icon for a web app manifest, which Chromium-based browsers use when a site is installed as an app.

Worked example

Upload a 1024×1024 PNG logo and you get five downloads. Put them in your site's root folder and add these tags to the <head> of each page:

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">

The sizes attribute helps the browser pick the right file for the screen instead of guessing. If you are building an installable web app, list the 512×512 file in your manifest's icons array too:

"icons": [
  { "src": "/favicon-512x512.png", "sizes": "512x512", "type": "image/png" }
]

According to web.dev, Chromium needs at least a 192×192 and a 512×512 icon in the manifest. This tool doesn't produce the 192×192 size, so make one from your 512×512 download with the Image Resizer and add a second entry for it.

How the resizing works

For each size, the tool creates a transparent canvas of exactly that many pixels, draws your whole image into it in a single step, and saves the canvas as a PNG. Three practical consequences follow:

• Non-square images are stretched, not cropped. The full width and full height are always squeezed into a square. A 1200×600 banner comes out with its contents squeezed to half their width, so circles become tall ovals. Crop your image to a square in an image editor before uploading.
• Transparency is kept. Transparent areas of a PNG, WebP or SVG stay transparent in every size. A JPEG has no transparency, so its background fills the whole icon.
• Output is always PNG, whatever you upload. No multi-size .ico file is created; modern browsers accept PNG icons through a link tag, so .ico only matters for very old browsers or software that looks for /favicon.ico on its own.

Designing for 16 pixels

A 16×16 icon has just 256 pixels in total. Thin lines, small text and fine detail that look crisp at 512×512 blur into a smudge, and because each size comes from one direct downscale of your source, a large, intricate original can look slightly soft or grainy at the smallest sizes. Before uploading, try viewing your logo at tab size: a bold symbol or a single letter on a plain or transparent background almost always reads better than a full wordmark. Many brands use a simplified mark for the favicon and keep the full logo for everything else. The previews in the results grid show the two smallest sizes at their real pixel size, so use them as a first check, then look at the actual browser tab once you've deployed.

Common use cases

• Generating a favicon set for a new website launch
• Creating an Apple touch icon for a site added to an iOS home screen
• Producing a 512×512 icon for a progressive web app manifest
• Replacing an outdated or blurry favicon with a freshly rendered set

Things to watch out for

Browsers cache favicons aggressively, so after replacing an icon you may keep seeing the old one for a while; changing the file name, or adding a version query such as ?v=2 to the href, forces a fresh download. Also check that the paths in your link tags match where you actually uploaded the files — a favicon that returns a 404 simply shows the browser's default icon, with no visible error.