Favicon Generator
Drop in a logo or image and get a complete favicon package: multi-resolution favicon.ico, apple-touch-icon, Android PNGs, site.webmanifest and the HTML to paste into your site. Everything runs locally in your browser.
HTML snippet
How to use
- Drop in your logo or icon — a simple, high-contrast shape on a transparent background works best.
- Adjust padding if the art touches the edges, or flatten transparency onto a background color.
- Click Generate, preview the 16/32/48 px renderings, then download the ZIP.
- Unzip into your site's root folder and paste the HTML snippet into your
<head>.
What it's good for
Launching a website. Browsers, iOS home screens and Android launchers all want different icon files. One upload here produces the whole set — favicon.ico, apple-touch-icon.png, 192/512 PNGs and the manifest — instead of exporting five files by hand.
Fixing a blurry tab icon. If your current favicon looks smeared on high-DPI screens, it's probably a single 16×16 image stretched up. A multi-resolution ICO keeps the tab icon crisp at every size.
Windows and Electron apps. The ICO container is also what Windows installers and desktop frameworks expect for app icons — add the 256 frame if you need the large Explorer view.
What's in the package
favicon.ico bundles the sizes you ticked (16/32/48 by default) into one file; browsers pick the sharpest frame automatically. apple-touch-icon.png (180×180) is what iOS uses when someone saves your site to their home screen. icon-192.png and icon-512.png plus site.webmanifest cover Android and PWA install prompts.
Notes & limits
Everything is rendered and encoded locally in your browser via the Canvas API — your logo never leaves your device. ICO frames use PNG compression, supported by Windows Vista+ and all modern browsers. SVG sources are rasterized at 1024px before scaling; animated formats are not supported. For best results start with a square image of at least 512×512.
FAQ
What sizes should a favicon be?
For a website, 16×16, 32×32 and 48×48 inside one favicon.ico cover every browser and tab density. Add apple-touch-icon (180×180) for iOS and 192/512 PNGs for Android — this tool generates all of them in one click.
Is my logo uploaded to a server?
No. Scaling, ICO encoding and ZIP packaging all happen locally in your browser. Your image never leaves your device, and no account is needed.
Why does my favicon look blurry?
Usually because a single small icon is being upscaled, or a detailed photo is shrunk to 16×16. Use a simple, high-contrast graphic, and embed multiple sizes so each context gets a native-resolution frame.
Can I keep a transparent background?
Yes — transparency is preserved by default in every output. If your site has both light and dark themes, use the flatten option to test how the icon reads on a solid background.
Where do the files go on my site?
Unzip the package into your site's root directory so favicon.ico sits at /favicon.ico, then paste the snippet into the <head> of your pages. That's the whole setup.