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.
Is it private?
Yes. Your picture is decoded with createImageBitmap, drawn onto an HTML <canvas> for each size and exported with canvas.toBlob — every step runs inside your own browser tab. The ZIP is assembled locally with a self-hosted copy of JSZip. Nothing is uploaded, nothing is stored on a server, and nothing is logged, so it is safe for confidential logos and unreleased brand work — and it keeps working offline once the page has loaded.
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.