Favicon Generator (all sizes + manifest)

What a favicon really is

A favicon is the small icon shown in browser tabs, bookmarks, history, and on mobile home screens when someone "adds to home screen". The classic favicon.ico from 1999 was a single 16×16 pixel image. Modern best practice is a small set of images at different sizes — browsers, OSes, and apps each prefer different ones, and they all look bad if you just upscale a tiny image.

Drop one large square image (ideally 512×512 or larger) here and the tool generates every size you need: 16, 32, 48, 192, 512 PNGs, an Apple touch icon at 180×180, plus a site.webmanifest for Progressive Web App installability. Everything runs in your browser using canvas; the source file never gets uploaded anywhere.

The sizes and what each one is for

• 16×16 — browser tab icon at standard DPI. The most-visible favicon for desktop users.
• 32×32 — browser tab at Retina/2x DPI. Also used by some Windows shortcuts.
• 48×48 — historical Windows site icon. Still requested by some bookmark managers.
• 180×180 (Apple touch icon) — iOS home screen when "Add to Home Screen" is used. Must be a PNG (not SVG); iOS automatically applies its standard mask/shadow.
• 192×192 — Android home screen, Chrome on Android tab cards.
• 512×512 — splash screen for PWAs, high-DPI home screen icons. The largest size the manifest needs.

Older guides also tell you to ship favicon.ico (multi-resolution ICO file with embedded 16, 32, 48 versions). Modern browsers prefer the PNG references in the HTML head over /favicon.ico, but the ICO is still useful as a fallback for very old clients and for the /favicon.ico request all browsers make automatically. This tool produces the PNGs; for a true multi-res ICO, use a separate ICO builder once.

Design tips for tiny icons

• Don't use your logo directly. A logo designed to look good at 200px wide will be unreadable at 16×16. Most major sites use a simplified mark (a single letter, an iconic shape) for their favicon.
• High contrast is essential. At 16×16, every pixel counts. A soft pastel gradient becomes a muddy blob. Solid colors, hard edges, and high contrast survive downscaling.
• Test on both light and dark browser themes. Browser tab backgrounds vary. A black-on-transparent favicon disappears on dark themes; vice versa. Either pick a color that works on both, or include a background plate.
• Provide a "safe area" of ~10% padding around your mark, especially for Apple touch icons. iOS applies a rounded-square mask; content too close to the edge gets clipped.
• Square aspect ratio is required. Non-square inputs get distorted or letterboxed depending on the platform.

What the manifest does

site.webmanifest is a JSON file that tells mobile browsers how to handle "Add to Home Screen". It declares the app's name (full and short), theme color (the OS status bar tint when the PWA is open), background color (the launch splash), and the icon image list. Without a manifest, mobile installation uses a few fallback signals; with one, you get a real app-like experience including a launch splash screen and a custom status bar color.

Reference it from your HTML head: <link rel="manifest" href="/site.webmanifest">. The included HTML snippet does this automatically.

Common pitfalls

• Forgetting the trailing slash on hrefs in HTML. If your favicon is at the site root, href="/favicon-32.png" works everywhere; relative paths break on deep URLs.
• Cached old favicons. Browsers cache favicons aggressively. To force a refresh after updating, append ?v=2 to the href (and bump the number each time).
• Apple touch icon path mismatch. If you reference /apple-touch-icon.png in HTML but iOS requests /apple-touch-icon-precomposed.png, you'll see a 404 in logs. The safe approach is to provide both files, or rely on the explicit link tag.
• SVG favicons + dark mode. Modern Chromium and Firefox accept SVG favicons. They scale perfectly and respond to prefers-color-scheme if you embed media queries in the SVG. Safari ignores SVG favicons entirely, so always ship PNGs as fallback.