Favicon Generator
Turn one image into favicons at every size plus a multi-size ICO file and the HTML tags. Runs in your browser with no upload.
Loading the tool…
User reviews
No reviews yet. If you’ve used this tool, be the first to leave one.
Favicon Generator: complete guide
Walk through the steps and examples, or jump straight to the topic you need.
At a glance
- Source
- Accepts one PNG, JPG, WebP, or SVG image up to 20 MB.
- Minimum size
- Both width and height must be at least 16 pixels.
- ICO contents
- A single favicon.ico holds 16, 32, 48, 64, 128, and 256 pixels.
- ICO format
- Sizes up to 64 pixels are stored as 32-bit BMP, and larger sizes as PNG.
- PNG list
- Creates 16, 32, 48, 180, 192, and 512 pixels separately.
- Aspect ratio
- Both Fit whole image and Fill square keep the original aspect ratio.
- Transparency
- Left as is by default; you can fill it with a chosen color if you want.
- Where it runs
- Conversion happens in this browser, and your original is not sent to a server.
How to use Favicon Generator
Upload one image
An image that is close to square works best. If it is too small, enlarging it makes it blurry, so we recommend at least 512 pixels. Drag and drop the file or click Choose file.
Choose how to fit it into a square
Fit whole image keeps the entire image and leaves the extra space empty. It suits logos with transparency. Fill square matches the shorter side and crops what overflows, so it suits photos. Either way the aspect ratio stays the same. If you want to cover transparent areas with a color, turn on background fill and pick a color.
Generate and check the tab preview
You get a preview drawn at the same 16-pixel size as a real tab. Large logos often turn to mush when shrunk, so check here first that you can still recognize it. If you can't, it is better to remake it from an image with the text removed and only the symbol left.
Download the ZIP and add the code
Upload the files to the root folder of your site, then paste the accompanying code inside <head>. The code lists only files that were actually created, so it never points to a missing file.
What it’s good for
Every browser and device size in one go
Browser tabs use 16 and 32 pixels, Windows shortcuts use 48 pixels, the iPhone home screen uses 180 pixels, and Android uses 192 and 512 pixels. One run creates all of these sizes, and favicon.ico holds 16, 32, 48, 64, 128, and 256 pixels in a single file. Sizes up to 64 pixels are stored as 32-bit BMP and larger ones as PNG, so the file opens in both older Windows and current browsers.
Check first that it is still recognizable when small
A large logo often turns to mush at 16 pixels. After generating, you get a preview drawn at the same 16-pixel size as a real tab, so you can see how it looks shrunk down. For images that are not square, you can choose between Fit whole image and Fill square; either way the aspect ratio is kept.
Worked examples
Fitting a wide logo to 32 pixels
Source 800 × 400px
Size 32pxFit whole image → drawn at 32 × 16px with 8px of empty space above and below
Fill square → scaled up to 64 × 32px with 16px cropped from each sideThe generated embed code
Generate with the default settings<link rel="icon" href="/favicon.ico" sizes="any">
<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="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Choosing a fit method
Swipe the table sideways to see the rest.
| Method | What happens | Good for |
|---|---|---|
| Fit whole image | The whole image fits and the extra space is left empty. | Logos with a transparent background, symbols that include text |
| Fill square | Fills the shorter side and crops what overflows. | Photos, images where the edges don't matter |
| Background fill | Covers transparent areas with the chosen color. | When a white logo disappears on a dark tab |
When the result isn’t what you expected
The tab still shows the old icon
Browsers cache favicons for a long time. Try a hard refresh, or close the tab and reopen it. If it still stays, add a value such as ?v=2 after the URL to tell the browser it is a new file.
I can't tell what the picture is at 16 pixels
At small sizes, text and thin lines disappear. Try remaking it from an image with the text removed and only the symbol left large. You can check right away in the tab preview.
It says the image is too small
Both width and height must be at least 16 pixels. The current size is shown with the message, so upload a larger original. Enlarging a small image makes it blurry.
The background looks black
By default, transparent areas are left as they are. If it looks black, your original already has a black background. Turn on background fill and choose the color you want, and it will be covered with that color.
Key terms
- Favicon
- The small site icon shown in browser tabs and bookmarks.
- ICO
- An icon format that holds images of several sizes in one file. The browser picks the size that fits the situation.
- apple-touch-icon
- The 180-pixel icon used when adding a site to the home screen on iPhone and iPad.
- Web manifest
- A file that lists the icons and information used when adding a site to the home screen on Android.
Favicon Generator FAQ
Is it just a file with the extension changed to ico?
No. It builds the header and entry table according to the ICO specification and packs an image for each size into one file. After creating it, the tool reads the file back to confirm the sizes it contains.
If I add a transparent logo, will the background turn black?
Transparency is kept as it is. You can pick a color to fill the background only if you want to.
Could the embed code list a file that doesn't exist?
The code is built only from the names of files that were actually created. The Android icons are connected through site.webmanifest instead of links.
Can I upload an SVG?
Yes. The result drawn by the browser is turned into an image for each size. However, the output files are PNG and ICO, and it does not create an SVG favicon itself.
Is the image I upload stored on a server?
No. Reading the image, resizing, bundling the ICO, and creating the ZIP all happen inside this browser.
Why are so many sizes needed?
Browser tabs, Windows shortcuts, the iPhone home screen, and the Android install screen each use a different size. You can upload only the ones you need, but having the full set keeps it sharp everywhere.