Favicon Generator

Upload a logo → get favicon.ico sizes, apple-touch-icon, PWA icons, and an HTML snippet. All in a ZIP.

Runs in your browser
🌐
Drop your logo or click to upload
Square PNG or SVG works best
HTML snippet (included in ZIP)
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

How to Use the Favicon Generator

  1. Upload your logo or source image — square PNGs with transparent backgrounds work best.
  2. Preview how the favicon looks at 16×16, 32×32, and other sizes to verify legibility.
  3. Click Download ZIP to receive all favicon files plus a ready-to-paste HTML <link> snippet.

About the Favicon Generator

Favicons are the small icons browsers display in tabs, bookmarks, and address bars. Modern websites require multiple favicon formats: classic favicon.ico for broad compatibility, PNG sizes for standard browsers, apple-touch-icon for iOS home screens, and larger PNG sizes for PWA manifests. This tool generates every required size from one source image, all processed in your browser using the Canvas API — your image stays on your device and is never uploaded anywhere.

Frequently Asked Questions

What size image should I use for a favicon?
Start with at least a 512×512 pixel square PNG. The tool scales it down to all required sizes. Using a larger source ensures that smaller sizes like 16×16 are crisp after downsampling.
Which favicon sizes do I need?
A complete set includes: favicon.ico (16, 32, 48px multi-size), PNG at 16×16, 32×32, and 96×96, apple-touch-icon at 180×180, and PWA icons at 192×192 and 512×512. This tool generates all of them.
Do I need to upload my image to a server?
No. Everything happens in your browser using the HTML5 Canvas API. Your image is never sent to any server or stored anywhere outside your device.
How do I add a favicon to my website?
Unzip the downloaded file and place all favicon files in your website's root directory. Then paste the included HTML snippet into the <head> section of your HTML. For Next.js, place files in the /public directory and add the tags to your _document or layout file.