Free tool
Favicon Generator
This free favicon generator turns one image into the whole set a site needs: 16 PNG sizes for browsers, Apple devices, Android and Windows tiles, a multi-size favicon.ico, a site.webmanifest and a browserconfig.xml, plus the HTML to paste into your head. Nineteen files, one ZIP, no sign-up.
Your image never leaves your browser. It is read locally, every icon is drawn on a canvas in your own tab, and the ZIP is assembled there too. Nothing is uploaded and nothing is stored.
Your image
Drop an image here, or click to choose
PNG, JPG, SVG or WebP. Square works best, at least 512 by 512.
Options
Used in site.webmanifest, which is the name shown when someone installs your site to a home screen.
Fills the square with your background color and centers the image inside it.
Rounds the icon itself. Leave at 0 if you want the platforms to do their own rounding.
How much of the square your image fills, leaving the rest as margin.
Sits behind your image, and becomes the Windows tile color.
The browser UI color on Android, written into the meta tags and the manifest.
The folder you will upload them to. Leave as / for the site root, or set something like /assets/icons/.
Preview
Choose an image to see how it will look as a tab icon and on a home screen.
Browser tab
iOS home screen
Android
Your package
Paste this into your <head>
Every file in the package
How to make your favicon package
Five steps, and nothing to install.
- Drop in your image. PNG, JPG, WebP or SVG. Square works best, and at least 512 by 512, because the largest icon in the set is 512. The tool tells you if yours is smaller.
- Choose an icon style. Background and margin fills the square with your color and insets your image, with an optional corner radius. Use my image as it is draws it with no background and keeps transparency.
- Set your colors. The background color sits behind the image and becomes the Windows tile color. The theme color is what Android paints its browser bar.
- Say where the files will live. Leave it as / for the site root, or set a folder like /assets/icons/. Every path in the snippet and the manifest follows it.
- Generate, download the ZIP, and paste the snippet into your <head>. Upload the files to the folder you named.
More free tools
Built for our own work, free for yours. No sign-up on any of them.
Font Clamp
QR Code Generator
Email Signature Generator
Color Contrast Checker
Schema Markup Generator
Meta Tag Preview
Image Converter
Case Converter
UTM Builder
Image Resizer
PDF Compressor
Merge PDF
Split PDF
What people use a favicon generator for
The icon set is the last thing anyone remembers and the first thing people see.
Launching a site
One image in, the whole icon set out, before the first deploy rather than as a snag afterwards.
A rebrand
Regenerate every size from the new mark so no old logo survives in a tab or on a home screen.
Handing over to a client
A ZIP and a snippet they can give to any developer, with no account and no dependency on us.
Making a site installable
The manifest carries the name and both Android icons, which is what a browser needs to offer Add to home screen.
Themes that want one file
Plenty of themes ask only for favicon.ico. This builds one with 16, 32 and 48 inside it.
Testing a mark small
The 16 pixel preview shows in seconds whether a logo survives at tab size, which is where most of them fail.
Frequently asked questions
What is in the package, where the files go, and what will not survive at 16 pixels.
Is my image uploaded anywhere?
No. Your image is read in the browser, every icon is drawn on a canvas in your own tab, and the ZIP is put together there too. Nothing is sent to us and nothing is stored, so there is also nothing to delete afterwards. The page does send three counters, how many packages were generated, how many were downloaded, and one per visit. Those are numbers only and carry nothing about your image.
What is actually in the ZIP?
Nineteen files. Sixteen PNGs: three for browsers at 16, 32 and 48, six for Apple devices from 60 up to 180, two for Android at 192 and 512, and five Windows tiles including the wide 310 by 150. Then a favicon.ico with 16, 32 and 48 inside the one file, a site.webmanifest and a browserconfig.xml. The HTML to reference them is on the page, not in the ZIP.
Do I really need all of them?
No, and it is worth saying so. Most sites are covered by favicon.ico, the 32 PNG, the 180 Apple touch icon and the two Android ones. The rest exist for older iOS devices and for Windows tiles, which few sites still care about. They are small and harmless to ship, so the package includes them rather than deciding for you.
Where do the files go, and what is the path field for?
The simplest answer is the root of your site, which is what / means and what most guides assume. If you keep assets somewhere else, put that folder in the path field and every reference in the snippet, the manifest and browserconfig is rewritten to match. Set it before you generate, because it is baked into those files.
Should I use an SVG as the source?
Yes, an SVG is the best source, because it is rasterised cleanly at every size instead of being scaled up from a fixed grid. One thing to check: the file needs a width and height, or a viewBox. Measured in Chrome, an SVG carrying neither is treated as 300 by 150, so a square mark comes out stretched. Almost every exported SVG has one or the other.
Why does my icon look muddy at 16 pixels?
A 16 pixel icon is 256 pixels in total. Fine lines, gradients and any lettering beyond a couple of characters cannot survive that, whatever tool made it. Use the simplest part of your mark, usually the symbol rather than the full lockup, and check the 16 preview before you ship it.
What is the difference between the two icon styles?
Background and margin fills the square with your background color, insets your image to the size you choose, and can round the corners. It is the right choice for a logo that needs breathing room or has no background of its own. Use my image as it is draws your image straight in with no fill, keeping transparency, which suits a mark that is already square and already has its own backdrop.
My image is smaller than 512 pixels. Does that matter?
The 512 Android icon will be enlarged from what you gave it and will look soft. The tool says so as soon as you choose the file rather than letting you find out afterwards. Everything smaller than your source is fine. If you can, supply 512 or larger, or an SVG, which has no such limit.
Want something like this on your own site?
Free tools are a small part of what we do. The rest is websites and digital products for businesses serious about growth, whether you are launching, scaling or transforming.