PRPickrack

Favicon Generator

Upload 1 image → get a complete favicon pack: 12 PNG sizes + ICO + manifest.json + HTML snippet. Browser-side.

Preview

Upload + generate to preview sizes

Pack includes: 12 PNG sizes (16-512px), favicon.ico (16/32/48 multi), apple-touch-icon.png (180), site.webmanifest, snippet.html, README.txt

Upload 1 image → favicon pack ZIP: 12 PNG sizes + ICO + manifest.json + HTML snippet. Browser-side.

Favicon Generator turns a single source image into a complete favicon pack for any website: 12 PNG sizes (16, 32, 48, 96, 144, 152, 167, 180, 192, 256, 384, 512), a multi-size favicon.ico (legacy IE/Edge), an apple-touch-icon.png (180×180 for iOS home screen), a site.webmanifest for PWA installation, and a ready-to-paste HTML snippet for your <head>. All zipped, downloaded in one click.

Use it for: a new site launch, replacing an old pixelated favicon, generating PWA icons for app-store-like installation on phones, or any time you need a complete cross-platform icon pack without remembering exactly which sizes Apple / Microsoft / Android require this year.

Free, no signup, browser-side. Your source image never leaves your tab — Canvas API resizes locally; JSZip archives in browser; ICO encoder writes the multi-size .ico inline. The output ZIP is self-contained.

Key features

  • 12 PNG sizes — 16, 32, 48, 96, 144, 152, 167, 180, 192, 256, 384, 512 — covers every modern browser + OS + PWA requirement.
  • Multi-size ICO — favicon.ico with 16/32/48px stacked inside (PNG-in-ICO format) — legacy IE/Edge compatibility without sacrificing modern crispness.
  • PWA manifest — site.webmanifest with 192/512 icons + your theme color + site name → PWA installable on Chrome/Edge mobile.
  • Apple touch icon — apple-touch-icon.png (180×180) for iOS home-screen shortcuts.
  • HTML snippet — Pre-built <link> tags + theme-color meta to paste into your <head> — covers all 5 file references in 6 lines.
  • Background fill modes — Transparent (default — works on PNG/SVG source) OR solid color background. Choose Contain or Cover sizing.
  • Browser-side only — Source image + generated icons stay in your tab. No upload, no signup.

How to use

  1. Step 1: Upload source image — Ideally a square 512×512+ PNG with transparency. SVG or smaller PNG works but may not look crisp at the largest size.
  2. Step 2: Pick background + fit mode — Transparent for modern PNG-favicons. Solid color if your icon needs a background (e.g., dark logo on white). Contain preserves aspect; Cover crops to fill.
  3. Step 3: Set site name + theme color — These go into the manifest.json + theme-color meta tag.
  4. Step 4: Click Generate → Download — ZIP downloads instantly with all 17 files (12 PNGs + ICO + 2 special + manifest + snippet + README).
  5. Step 5: Upload + paste snippet — Drop all files into your site root. Paste the HTML snippet into your <head>. Done.

When to use

  • New website launch — generate full favicon set in 60 seconds
  • PWA setup — manifest + icons in one shot for Add-to-Home-Screen
  • Redesign refresh — replace old pixelated 16×16 favicon with modern multi-size set
  • Microservice each-needs-own-favicon — generate per-service icon packs in bulk
  • Personal portfolio site — quick favicon for blog launch without opening Photoshop
  • Whitelabel SaaS — generate per-client favicon pack from their logo

Frequently asked questions

What size should my source image be?

512×512 pixel PNG with transparency is the sweet spot. SVG also works (vector → crisp at all sizes). Smaller than 256×256 → the 384 and 512 outputs will be blurry. Non-square → output will be cropped or padded based on your fit-mode choice.

Why so many sizes?

Different platforms expect different sizes. Modern Chrome uses 32×32. iOS home screen uses 180×180. Android PWA uses 192×192 + 512×512. Old IE/Edge still reads .ico (16/32/48). Legacy mobile Safari uses 152 or 167. Covering all 12 sizes means no platform shows a blurry icon.

Do I need all 12 PNG files?

For maximum compatibility yes. For minimum: 32×32 + 180×180 + 192×192 + favicon.ico cover ~95% of users. Upload all 17 files anyway — they're tiny and prevent edge-case ugliness.

What's in the favicon.ico?

16×16, 32×32, and 48×48 PNG-format images stacked inside a single .ico container. Modern format (PNG-in-ICO) supported since Vista. Older Windows would need BMP-format inside — Pickrack uses PNG-in-ICO for crispness.

Manifest.json — what's it for?

PWA (Progressive Web App) installation. When a user 'Add to Home Screen' on Chrome/Edge mobile, the browser reads the manifest to pick an icon, set the theme color, and choose display mode. Optional but recommended for any modern site.

Can I preview before downloading?

Yes — the right-side panel shows 16/32/96/192 previews after Generate. Click Download once satisfied.

Does this support SVG favicons?

Source upload accepts SVG. Output is rasterized to PNG at each size (favicons need PNG/ICO for cross-browser support). SVG-favicon <link rel="icon" type="image/svg+xml"> is on the roadmap but only works in Chrome+Firefox+Safari latest.

Related tools

Image Converter

Convert images between PNG, JPG, WebP, AVIF formats. Batch support, browser-side. No upload.

Image Resizer

Resize JPG, PNG, WebP images to any dimensions. Browser-side, no upload, no quality loss for downscaling.

SVG Optimizer

Strip comments, metadata, whitespace; round decimals; shorten colors. Live preview, size diff. Browser-side.