QuickTooly
Free Tool

Free Favicon Generator — All Sizes, ICO & PWA Manifest

Upload any image and instantly generate a complete favicon set — 16×16 through 512×512 PNGs, a multi-size favicon.ico, Apple Touch Icon, and a ready-to-paste HTML snippet with PWA manifest. Download everything as a single ZIP. Free, browser-based, no upload.

Your Favicon Generator

Upload a PNG, JPG, WebP, or SVG image (square works best), pick the sizes you need, and click Generate. You get a ZIP with every file your website needs plus copy-ready HTML and manifest snippets.

Drop your image here or click to select

Supports PNG, JPG, WebP, SVG — up to 10 MB. Square images recommended.

Last updated: May 19 2026

Reviewed by the QuickTooly Team

Favicon Generator Guide

Generate All Favicon Sizes from One Image

A favicon is the small icon that appears in browser tabs, bookmarks, and home screen shortcuts. Modern browsers and devices expect multiple sizes — from the classic 16×16 tab icon all the way to 512×512 for PWA splash screens. This tool generates every size you need from a single source image, packages them into a ready-to-deploy ZIP, and hands you the exact HTML and manifest code to paste into your project.

What Files Does a Complete Favicon Set Need?

  • favicon.ico — The legacy format. Contains 16×16, 32×32, and 48×48 images in one file. Required for compatibility with older browsers and many CMS platforms.
  • favicon-16x16.png / favicon-32x32.png — Explicit PNG favicons for modern browsers. Better quality than ICO at those sizes.
  • apple-touch-icon.png (180×180) — Used when a visitor adds your site to the iOS home screen. Apple ignores smaller sizes.
  • android-chrome-192x192.png & 512×512 — Required by the PWA spec for the app install banner and splash screen on Android.
  • site.webmanifest — JSON file that registers your app with the browser and links to the 192 and 512 icons.

How to Add Favicons to Your Website — 3 Steps

Step 1: Upload Your Logo or Icon

Drag and drop a PNG, JPG, WebP, or SVG file into the upload area. Square images (equal width and height) produce the best results — a 512×512 or 1024×1024 source works perfectly. The tool uses the browser's Canvas API to resize it precisely to each target dimension.

Step 2: Choose Your Sizes and Background

All standard sizes are selected by default. Toggle off any sizes you don't need. Choose "Transparent" background to preserve alpha channel (best for logos on any color background) or "White" to fill transparent areas (useful if your site has a dark theme and you want a clean white-backed icon). Click "Generate Favicons" to process all sizes simultaneously.

Step 3: Download and Deploy

Click "Download favicons.zip" to get all your files in one bundle. Extract the ZIP to your project's public root (usually /public or /static). Copy the HTML snippet into your <head> tag and place site.webmanifest in the same folder as the icons.

PWA Manifest and Apple Touch Icons Explained

Progressive Web Apps (PWAs) use a manifest file to tell the browser how to display the app when installed. The icons array in site.webmanifest should always include a 192×192 icon (used for the home screen shortcut) and a 512×512 icon (used for the splash screen). Apple devices use a separate apple-touch-icon link tag and ignore the manifest icons entirely — the 180×180 PNG is the correct size for all modern iPhones and iPads.

Frequently Asked Questions

What image size should I use as a source?

Use a square image of at least 512×512 pixels for the best results at all sizes. SVG files are ideal because they are resolution-independent — the tool renders them at the target size using the browser's built-in SVG renderer. JPG and PNG sources at 1024×1024 or larger also work well.

Will my image be uploaded to a server?

No. All processing happens locally in your browser using the Canvas API. Your image never leaves your device. This makes the tool safe for confidential logos, unreleased brand assets, and any sensitive artwork.

How do I make my favicon look sharp at 16×16?

At 16×16 pixels, fine details are lost regardless of source quality. For the sharpest result, use a source image that is already simplified — a bold monogram, a clean icon shape, or your logo reduced to its essential mark. Avoid gradients and thin lines in the source if the 16px version is a priority.

Where do I put the favicon files in my project?

Place all favicon files in the root of your public directory (e.g., /public/ in Next.js, Nuxt, or Vite projects). The HTML snippet assumes the files are at the root path (/favicon.ico, /apple-touch-icon.png, etc.). If you place them in a subfolder, update the paths in the HTML and manifest accordingly.

Does this tool support animated favicons?

No — animated GIF or APNG favicons are generated differently and have limited browser support. This tool focuses on the static favicon set required by the vast majority of websites. For animated favicons, you would need a canvas-based animation approach in JavaScript, which is separate from a static file set.

More Free Image Tools

Looking for other ways to work with images?

Generate Your Favicon Set Now

Upload your logo above, confirm the sizes, and download a complete favicon package in seconds — free, private, and ready to deploy.