UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

Favicon Set Generator

Upload an image and generate a complete favicon set (16px to 512px) with HTML snippet. Download as ZIP.

About Favicon Set Generator

The Favicon Set Generator creates all the PNG favicon sizes your website needs from a single square source image. It outputs 16×16, 32×32, 48×48, 64×64, 96×96, 128×128, 180×180 (Apple Touch Icon), 192×192 (Android Chrome), and 512×512 PNGs — all resized from your source using Canvas scaling. A theme-color meta tag is included in the generated HTML snippet. Download everything in a single ZIP file with correctly named files (favicon-16x16.png, apple-touch-icon.png, etc.) ready to drop into your project's public folder.

Why use Favicon Set Generator

Generates all 9 standard

Generates all 9 standard favicon sizes in one click

Includes correctly named files

Includes correctly named files for browser and PWA compatibility

Produces a ready-to-paste HTML

Produces a ready-to-paste HTML snippet for the <head>

Runs entirely in your browser

Runs entirely in your browser — no server upload or account needed

Saves the manual step

Saves the manual step of resizing nine times in an image editor.

Free

Free, no sign-up, and unlimited regeneration as your brand evolves.

How to use Favicon Set Generator

  1. Upload a square image (at least 512×512px recommended for best quality)
  2. Pick a theme color that matches your site's brand
  3. Review the previews to confirm all sizes look correct
  4. Click 'Download ZIP' to get all favicon files plus a README with the HTML snippet
  5. Copy the HTML snippet from the page and paste it into your site's <head>
  6. Paste the generated HTML snippet right after your <title> tag in the document <head>.
  7. Upload the unpacked ZIP files to your site's public/root folder so they're served from /favicon-32x32.png etc.

When to use Favicon Set Generator

  • When launching a new website and needing a favicon package
  • When rebranding a site and updating all icon sizes at once
  • When adding PWA manifest icons (192 and 512px) to an existing site
  • When you need Apple Touch Icon (180px) alongside standard favicons
  • When migrating from a legacy ICO-only setup to modern PNG favicons.
  • When debugging missing icons in Lighthouse audits — generate a complete set in one step.

Examples

New SaaS launch

Input: A 1024x1024 brand logo PNG, theme color #4f46e5

Output: ZIP containing 9 favicon PNGs plus README with HTML snippet ready to paste into <head>

Personal blog rebrand

Input: A 800x800 illustrated avatar, theme color #f5c842

Output: Complete favicon set with consistent yellow theme-color meta tag

PWA upgrade

Input: A 512x512 app icon designed for iOS

Output: Full favicon set including 192 and 512 PWA icons referenced from the manifest

Tips

  • Start with a 1024x1024 PNG — that gives clean downscaling for every output size including 512px.
  • Pick a theme color matching your site's primary brand (the meta tag colors mobile browser UI bars on Android).
  • Test the 16x16 preview at 100% zoom — if it looks unreadable, simplify your icon design before generating.
  • Avoid thin strokes or small text in your source — they vanish at 16x16 and look messy at 32x32.
  • Use a square background or transparent PNG; non-square inputs may letterbox awkwardly at smaller sizes.

Frequently Asked Questions

What image dimensions should I use as input?▾
A square image at least 512×512px is recommended so the largest output size (512px) is not upscaled. Lower-resolution inputs work but may appear blurry at larger sizes.
Are ICO files included?▾
No. Modern browsers support PNG favicons natively. The generator produces PNG files for all sizes. For IE11 compatibility (very rare now), you would need an ICO converter.
What are the file names in the ZIP?▾
favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, favicon-64x64.png, favicon-96x96.png, favicon-128x128.png, apple-touch-icon.png (180px), android-chrome-192x192.png, android-chrome-512x512.png.
What is the theme color for?▾
The theme-color meta tag sets the browser UI color on Android Chrome and some desktop browsers. It should match your site's primary brand color.
Can I use a non-square image?▾
Yes, but the output will be letterboxed or stretched depending on the canvas scaling. A square source always produces the best results.
Is JSZip loaded from a CDN?▾
Yes. JSZip is loaded from jsDelivr/cdnjs when you click Download ZIP. It runs in your browser — no data is sent to any server.
Where should I put the favicon files on my server?▾
Put all PNGs in your site's root or /public/ folder so URLs like /favicon-32x32.png and /apple-touch-icon.png resolve at the root path. Update the HTML snippet paths if you place them in a subfolder.
Why doesn't this tool generate an SVG favicon?▾
SVG favicons are an emerging standard and require a vector source. This tool downscales raster bitmaps. For SVG, ship your vector source separately and reference it via <link rel="icon" type="image/svg+xml">.

Explore the category

Image to ASCII Art Converter Convert any image to ASCII art in your browser. Adjust columns, character set, and download as PNG or copy the text. Image Batch Rename & Download Rename multiple images using a pattern with {n} and {name} placeholders, preview new names, and download as ZIP. Photo Collage Grid Maker Combine up to 9 photos into a collage using multiple layout templates. Set padding, corner radius, background color, and output resolution, then download as PNG. Bulk Image Batch Resize, recompress, or reformat dozens of images and download as one ZIP Bulk Image Convert Convert many images between JPG, PNG, and WebP and download as a ZIP Favicon Generator Generate PNG and ICO favicons from images

Glossary

Favicon
The small icon a browser shows in tabs, bookmarks, and history — typically 16x16 or 32x32 px.
Apple Touch Icon
A 180x180 PNG used by iOS Safari when a user adds your site to their home screen.
Android Chrome icon
192x192 and 512x512 PNGs referenced by a web app manifest for installable PWAs on Android.
Theme color
A CSS-style color value in a <meta name="theme-color"> tag that browsers use to tint mobile browser UI.
Manifest
A web app manifest JSON file referencing icons and metadata for a PWA — most apps reference 192 and 512 sizes.
ICO format
A legacy Windows icon format containing multiple bitmaps; modern browsers prefer PNG so this generator outputs PNGs only.
Canvas downscaling
Browser-native image resizing on a canvas, used here to produce each smaller PNG from the source.