This favicon generator turns one image into PNG favicons in nine sizes, from the 16x16 icon in a browser tab to the 512x512 icon a web app manifest lists. It resizes the image on a canvas in your browser, so the file is never uploaded, and it writes the HTML link tags for the <head> of your pages.
How to use the favicon generator
- Drag an image onto the Upload Image box, or click it to browse. PNG, JPG, SVG and WebP files are accepted, and any other type is refused with a message.
- Check the Original Preview, which shows the image with its width, height and file name. Clear Image removes it so you can pick another file.
- Under Select Sizes, untick any sizes you don't need. All nine are ticked to begin with.
- Click Generate Favicons. Each size appears as a card with its own Download button, and Download All as ZIP saves every icon in one favicons.zip file.
- Copy the tags from the HTML Link Tags box and paste them into the
<head>of your pages.
The nine sizes and their file names
| Size | File name | Label in the tool |
|---|---|---|
| 16x16 | favicon-16x16.png | Standard favicon |
| 32x32 | favicon-32x32.png | Taskbar shortcut |
| 48x48 | favicon-48x48.png | Desktop icon |
| 64x64 | favicon-64x64.png | High DPI favicon |
| 96x96 | favicon-96x96.png | Google TV |
| 128x128 | favicon-128x128.png | Chrome Web Store |
| 180x180 | favicon-180x180.png | Apple Touch Icon |
| 192x192 | favicon-192x192.png | Android Chrome |
| 512x512 | favicon-512x512.png | PWA Splash |
The labels are the favicon generator's own notes on where each size tends to be used. For most sites, 32x32, 180x180, 192x192 and 512x512 cover browser tabs, the icon an iPhone shows when someone adds your site to the home screen, and the two sizes a web app manifest needs for Chrome.
PNG to favicon: preparing the source image
Start with a square image of at least 512x512 pixels so that no size has to be enlarged. The generator draws the whole image into each square, so a 1200x800 logo gets squashed sideways. Crop it to a square first, for example with the image resizer set to 512 by 512 pixels with Crop to fill.
A PNG with a transparent background keeps its transparency in every icon. A JPG has no transparency, so its background colour fills the whole square. An SVG is drawn fresh at each size before it is saved as PNG.
Detail disappears at 16x16, where the whole icon is 256 pixels. A single letter or a simple shape with thick lines stays readable, while small text and thin outlines turn to blur, so look at the 16x16 and 32x32 cards before you download.
The HTML link tags it writes
With only 32x32, 180x180 and 192x192 ticked, the HTML Link Tags box shows:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">Every size gets a rel="icon" tag except 180x180, which gets rel="apple-touch-icon". The paths start at the site root, so upload the PNG files to the top folder of your site or edit the href values to match where you put them. If you rename a file, change its tag too.
What it does not make: favicon.ico and the manifest
This favicon generator saves PNG files only, so if you were looking for a favicon.ico generator, it is not one: it cannot write the ICO format. Current browsers accept PNG favicons through the link tags above, but browsers also ask for /favicon.ico on their own, and this tool does not make that file.
It does not create the web app manifest either. If your site has one, list the two large icons in its icons member, as described in MDN's manifest icons reference:
"icons": [
{ "src": "/favicon-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/favicon-512x512.png", "sizes": "512x512", "type": "image/png" }
]To embed a small icon straight into a stylesheet instead of linking a file, convert the PNG with the image to Base64 converter, and read how to Base64 encode an image in your browser for when that is worth doing. The meta tag generator writes the other tags that go in the same head section, and the rest of the developer tools are listed on one page.
