CodeKeetCodeKeet

Favicon Generator

Generate all favicon sizes (16, 32, 180, 192, 512) + ICO file from any image. Includes HTML snippet and PWA manifest. 100% client-side.

🔒 100% private: All generation happens in your browser using the Canvas API. Your images never leave your device.

About Favicon Generator

A favicon is the small icon that appears in browser tabs, bookmarks, and mobile home screens. Modern websites need multiple favicon sizes: 16×16 and 32×32 for desktop browsers, 48×48 inside the ICO file for Windows taskbar, 180×180 for Apple touch icons (iOS home screen), 192×192 and 512×512 for Android and PWA manifests. Getting them all right — with the right files and the right HTML — is tedious. This tool generates every favicon size you need from a single uploaded image, packages them into a downloadable ZIP, and provides the exact HTML snippet, browserconfig.xml, and site.webmanifest to paste into your project. Everything runs in your browser using the Canvas API.

How It Works

  1. Upload a square image (PNG, JPG, SVG, WebP — at least 512×512 recommended).
  2. Choose a background color (for transparent images, e.g. to add white/colored padding).
  3. Preview all generated sizes.
  4. Download individual files or a complete ZIP with the HTML snippet.

✨ Key Features

  • ✓Generate 16×16, 32×32, 48×48, 64×64, 96×96, 128×128, 180×180, 192×192, 256×256, 512×512
  • ✓Combine multiple sizes into a single favicon.ico (multi-resolution)
  • ✓Apple Touch icon (180×180)
  • ✓Android Chrome icons (192×192, 512×512)
  • ✓PWA manifest (site.webmanifest)
  • ✓Windows tile config (browserconfig.xml)
  • ✓HTML snippet to paste in <head>
  • ✓Optional background color for transparent PNGs
  • ✓Preview all sizes at a glance
  • ✓Download individual files or ZIP with all assets
  • ✓100% client-side — no data sent to any server

🎯 Common Use Cases

  • →Adding a professional favicon to a new website
  • →Fixing a missing or default browser tab icon
  • →Making an Apple touch icon for iOS home screen
  • →Setting up Android/PWA icons and manifest
  • →Preparing a complete favicon pack for a client
  • →Regenerating favicons after a logo change
  • →Meeting Lighthouse/PWA audit requirements
  • →Preparing favicons for a web app

💡 Advanced Tips & Pro Insights

  • ▸Use a square image at least 512×512 for best quality — the tool downsizes automatically to all smaller sizes.
  • ▸For icons with transparency, leave the background transparent — the ICO and PNGs will preserve alpha. For solid icons, add a colored background (some Windows contexts need it).
  • ▸favicon.ico should be at the site root (yourdomain.com/favicon.ico) — browsers check this path first.
  • ▸Modern browsers prefer PNG and SVG over ICO, but ICO is still needed for legacy Windows and some tools. This tool generates both.
  • ▸For the best PWA score (Lighthouse), include at least 192×192 and 512×512 PNG icons with the correct manifest.

Frequently Asked Questions

Is this favicon generator free?▾
Yes, this favicon generator is completely free with no signup, email, or usage limits.
Is my data safe?▾
Yes, 100% safe. All favicon generation happens in your browser using the Canvas API. Your image is never uploaded to any server.
What size image should I upload?▾
At least 512×512 pixels, square. This produces crisp favicons at every size. Smaller images (e.g., 256×256) work but will look blurry at 512×512.
Which files do I need to upload to my website?▾
Download the ZIP and upload all files to your site root (or /icons folder). Then paste the provided HTML snippet into the <head> of every page. The favicon.ico must go in the site root for best compatibility.
Why do I need an ICO file?▾
favicon.ico is the legacy format that every browser supports, including older ones and desktop shortcuts. Modern browsers also accept PNG, but ICO is still needed for full compatibility.
What is an Apple touch icon?▾
The Apple touch icon (180×180) is what appears when a user adds your site to their iOS home screen. If it is missing, iOS uses a screenshot of the page — usually ugly.
What is site.webmanifest?▾
site.webmanifest (or manifest.json) is a PWA (Progressive Web App) manifest. It tells Android how to display your app icon on the home screen and controls other PWA metadata.
Does the tool support SVG input?▾
Yes. SVG is rendered at 512×512 and then converted to all PNG/ICO sizes. SVG is ideal because it scales perfectly.