Favicon generator
Upload a logo, download every icon your site needs: favicon.ico, apple-touch-icon, PWA icons, and the manifest + HTML snippet. Everything runs in your browser — your image never leaves your device.
<link rel="icon" href="/favicon.ico" sizes="48x48"> <link rel="icon" href="/icon-192.png" type="image/png" sizes="192x192"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
Why your website needs a proper favicon set
A favicon is the small icon that represents your site in browser tabs, bookmarks, browser history, and — since Google shows favicons next to mobile search results — on Google itself. Sites without one look unfinished, and in a row of twenty open tabs, yours becomes the one nobody can find.
One icon file isn't enough anymore: browsers want favicon.ico, iOS wants a 180×180 apple-touch-icon (with no transparency), Android and PWAs want 192×192 and 512×512 PNGs declared in a web manifest. Getting the set right means your logo looks sharp everywhere from a browser tab to a phone home screen.
This generator produces the complete set from one upload — and it runs entirely in your browser, so your logo never leaves your device.
How to generate favicons for your website
- Upload your logo — a square image works best — PNG or SVG with a transparent background gives the cleanest results.
- Check the previews — make sure the icon is still recognizable at 16px; intricate logos often need a simplified mark.
- Pick the iOS background — Apple touch icons can't be transparent, so choose the background color for the iPhone home-screen tile.
- Download the zip — you get favicon.ico, apple-touch-icon.png, both PWA PNGs, site.webmanifest, and a ready-made HTML snippet.
- Install it — put the files in your site's root folder and paste the snippet into your <head>.
Frequently asked questions
What favicon sizes do I need?
A complete modern set is: favicon.ico containing 16×16, 32×32, and 48×48; a 180×180 apple-touch-icon.png for iOS; and 192×192 plus 512×512 PNGs declared in site.webmanifest for Android and PWAs. This tool generates all of them from one image.
What is an apple-touch-icon?
It's the icon iOS uses when someone adds your site to their iPhone or iPad home screen, and Safari uses it in favorites. It should be 180×180 pixels with a solid background, because iOS replaces transparency with black.
Where do I put the favicon files?
Place them in your website's root directory (so they're reachable at /favicon.ico, /apple-touch-icon.png, and so on), then add the link tags from the included snippet to the <head> of your pages.
Does my favicon appear in Google search results?
Yes — Google displays your favicon next to your site name in mobile search results, so a missing or broken favicon directly affects how trustworthy your listing looks. Google reads it from the icon declared on your homepage.
Is my logo uploaded to your server?
No. This tool runs entirely in your browser using the Canvas API — the image, the resizing, and the zip file are all created on your device and never sent anywhere.