How to make a favicon from an image
- Add your image, drag a file onto the box or click to browse. A square PNG or SVG at least 512 px wide gives the crispest icons, but JPG and WebP work too.
- Pick a background, keep the background transparent for PNG icons, or untick the box and choose a solid colour to fill the square (handy when your source has no transparency).
- Review the previews, the tool instantly renders 16, 32, 48, 180, 192 and 512 px versions so you can check how your icon looks at each size.
- Download, grab the whole bundle as a .zip, or download just the
favicon.ico. Then copy the<link>tags into your site.
What is a favicon, and why so many sizes?
A favicon is the small icon that appears in a browser tab, bookmark list and history. Modern devices expect more than one file, though. Desktop browsers read the classic 16×16 and 32×32 icons (and a 48×48 for high-DPI tabs), iPhones and iPads use a 180×180apple-touch-icon when a page is saved to the home screen, and Android and Progressive Web Apps reference192×192 and 512×512 icons through a web manifest. Shipping the full set means your brand looks sharp everywhere instead of a blurry, stretched single image.
This generator draws your image onto a square canvas at each of those sizes, keeping the aspect ratio and centring it, then exports a clean PNG for every one. The favicon.ico is built by wrapping the 32×32 PNG in a tiny ICO container, which every browser, including older ones, understands. You also get a startersite.webmanifest you can rename and edit.
Where do the files go?
Unzip the bundle into the public root of your site (the same folder that serves /). Most of the files use the conventional names that the pasted <link> tags reference, so once the files are in place and the tags are in your <head>, browsers will pick them up automatically. Remember to clear your cache or do a hard refresh, since browsers cache favicons aggressively.
Frequently asked questions
Does this upload my image anywhere?
No, the image is processed locally in your browser and never leaves your device.
What is in the ZIP?
favicon.ico, favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png (180 px), android-chrome-192x192.png, android-chrome-512x512.png and a starter site.webmanifest.
My source image is not square, what happens?
The icon is scaled to fit inside the square and centred, so it is never stretched. For the best result, start from a square image or one with even padding.
Should I keep a transparent background?
Transparent PNGs look great in browser tabs. If your logo needs a solid backdrop, untick the transparent option and choose a colour to fill the square.
Why is my old favicon still showing?
Browsers cache favicons hard. After uploading the new files, do a hard refresh or clear the site cache, and they should update.