Favicon generator
Turn one image into a full favicon package — a multi-resolution favicon.ico, the PNG sizes, an apple-touch-icon, a site.webmanifest, and the exact HTML snippet to paste into your site — all built in your browser and zipped. Your image never leaves your device: no upload, no account, no tracking.
Drop an image here, paste, or
PNG, JPEG, or WebP. A square image at least 512 px works best. Generated in your browser, nothing uploaded.
The apple-touch-icon is drawn on a solid background — Apple does not show transparency.
What this tool does
Drop in one PNG, JPEG, or WebP image and this page turns it into everything a modern site needs to show a favicon — the little icon in the browser tab, the bookmark, the phone home screen, and the install prompt. It builds a real multi-resolution favicon.ico containing the 16×16, 32×32, and 48×48 icons, standalone PNGs at 16, 32, 48, 192, and 512 pixels, a 180-pixel apple-touch-icon.png for iOS, a site.webmanifest that names your site and points to the large icons, and a ready-to-paste HTML snippet. Everything is packed into a single favicon-package.zip. A canvas cannot save an .ico file on its own, so the ICO container is assembled byte by byte here in the page.
Square, background, and fit
Favicons are square, so a non-square image has to be squared first — and this tool never stretches it. By default it pads: the whole image is centered and the margins are left transparent, or filled with a background color if you pick one. If you would rather trim than pad, switch Fit to Crop and the image is cut to a centered square instead. A live preview renders the icon at 16, 32, and 180 pixels next to a browser-tab mock, so you can judge legibility at real favicon scale before you download — fine detail and thin text tend to disappear at 16 pixels, and it is better to find that out here.
Install it
Unzip the package into the root of your site — the same folder as your home page — and paste the snippet from favicon-snippet.html into your page's <head>. The tags point at /favicon.ico, the two PNG sizes browsers ask for, the apple-touch-icon, the manifest, and your chosen theme color. That is the whole install: no build step, no plugin. Older browsers read the .ico; modern ones prefer the PNGs and the manifest.
Nothing is uploaded
Decoding, squaring, resizing, ICO assembly, and zipping all run in your browser, using code this page loads only from its own address. You can open your browser's network panel and watch: no image data leaves the machine. There is no account and nothing to sign up for. The ZIP library is fetched only when you click Download package, and nothing else. The full source is public on GitHub under the AGPL-3.0 licence, and the privacy panel in the footer names every file this page can load and when. SVG source is not supported yet — export a PNG for now — and a source smaller than 512 pixels still works, though the 192 and 512 icons will be upscaled and may look soft.
Questions
Can I make a favicon without uploading my image?
Yes. The whole process happens in your browser, on your device — you can verify it by opening your browser's DevTools Network tab while you work and watching that no image data leaves the machine. There is no account and nothing to sign up for.
Can I make a favicon.ico from a PNG or JPEG?
Yes. Drop in a PNG, JPEG, or WebP and the tool builds a real multi-resolution favicon.ico that packs the 16×16, 32×32, and 48×48 icons into one file. Because a browser canvas cannot save the .ico format directly, the ICO container is assembled byte by byte in the page from the PNG-encoded sizes.
What favicon sizes do I actually need?
This tool covers the practical modern set: a favicon.ico with 16, 32, and 48 pixels for legacy support; standalone 16, 32, 48, 192, and 512 pixel PNGs for browsers and the manifest; and a 180 pixel apple-touch-icon for iOS home screens. The 192 and 512 sizes are what the web manifest uses for install prompts and the Android home screen.
How do I install the favicon on my site?
Unzip the package into your site's root folder and paste the contents of favicon-snippet.html into your page's <head>. The snippet references the .ico, the two PNG sizes, the apple-touch-icon, the manifest, and your theme color. No build step or plugin is involved.
Does it support transparency?
Yes. If you keep the background transparent, the padded favicon PNGs and the .ico preserve the transparency of your source. The one exception is the apple-touch-icon: Apple does not show transparency on home screens, so that icon is always drawn on a solid background — white by default, or the background color you choose.
Related tools
Crop Image — square your logo before generating icons. Resize Image — change pixel dimensions to an exact size. Compress images — shrink file size without changing dimensions. Photo Editor — crop, redact, remove backgrounds, and batch-edit images.