Favicon Generator

Upload one image and generate favicons in all standard sizes: 16x16, 32x32, 48x48, 64x64, 128x128, 180x180 (Apple Touch), 192x192, and 512x512 (PWA). Download individually as PNG. 100% client side.

🖼

Click to upload or drag and drop an image

PNG, JPG, SVG, or WebP. Square images work best.

About Favicons

Favicons are the small icons shown in browser tabs, bookmarks, and home screens. Modern browsers and platforms require multiple sizes for the best experience across devices.

Size Reference

  • 16x16 - browser tab (classic favicon.ico)
  • 32x32 - browser tab (high DPI), taskbar
  • 48x48 - Windows site icon
  • 64x64 - Windows site icon (high DPI)
  • 128x128 - Chrome Web Store
  • 180x180 - Apple Touch Icon (iOS home screen)
  • 192x192 - Android Chrome, PWA manifest
  • 512x512 - PWA splash screen

Tips

  • Use a square source image (at least 512x512 pixels)
  • Keep the design simple -- it must be recognizable at 16x16
  • Use transparent backgrounds (PNG) for best results

Related Tools

Modern Favicons: One Source, Every Surface

"Favicon" used to mean a single 16×16 pixel .ico file. In 2026 it means a dozen variants: 16/32/48 for browser tabs, 180×180 for iOS home-screen, 192/512 PNGs for Android and PWA manifests, an SVG for crisp scaling on high-DPI displays, and a maskable PNG for adaptive icons. Modern browsers and platforms each pick the variant that fits their context — get one wrong and you ship pixelated icons or fall back to a default placeholder.

The full set you need today

  • favicon.ico (16×16 + 32×32 multi-resolution): legacy browsers and bookmarks.
  • favicon.svg: modern browsers prefer this — scales to any DPR with no aliasing.
  • apple-touch-icon.png (180×180): iOS home-screen icon.
  • icon-192.png + icon-512.png: Android home-screen and PWA manifest.
  • maskable-icon.png (512×512 with safe zone): Android adaptive icons that get clipped to circle/squircle masks.
  • manifest.webmanifest: ties them together and enables PWA install.

The HTML

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

Common pitfalls

  • SVG with text. Tab favicons render at 16px — text becomes unreadable. Use a glyph or simple shape.
  • Wrong color in dark mode. A black icon disappears on a dark browser tab. Use a light-on-dark version or media-query inside the SVG.
  • Maskable safe zone ignored. Android crops 20% from each edge. Anything important must fit inside the inner 80% safe zone.
  • Missing viewport meta. Apple-touch-icon requires the viewport meta to be set on the page or it won't be picked up for "Add to Home Screen".
  • Caching forever. Browsers cache favicons aggressively (sometimes for weeks). Bust by appending ?v=2 on changes.

Branding consistency

Your favicon is the smallest version of your brand. Keep it simple, recognizable at 16px, and consistent with your wordmark. Common mistakes: cramming too much into a small icon, using the wordmark instead of a glyph, picking colors that disappear on common tab backgrounds. Test by zooming a browser tab to 50% — if the icon is still recognizable there, it'll work everywhere.

Frequently Asked Questions

Do I still need a .ico file in 2026?

Yes — for older browsers and Windows pinning. Use a multi-resolution .ico containing 16, 32, and 48 px variants alongside your modern PNG/SVG set.

What is a maskable icon?

An icon designed with a 20% safe zone around the edges so Android can crop it to circles, squircles, or other adaptive masks without cutting off content.

Why is my favicon not updating in the browser?

Aggressive caching. Append a query string like ?v=2 to the link or use a hash in the filename, then hard-refresh.

Can I use a single SVG for everything?

For modern browsers, yes. But you still need PNG fallbacks for iOS home-screen, Android, and PWAs.