How to Create a Favicon (2026 Complete Guide)
A favicon is the small icon that appears in browser tabs, bookmarks, history, and on the home screen when someone adds your site to their phone. It's also one of the most-overlooked details in web design — and the difference between a site that feels "real" and one that feels half-finished.
What's Actually in a Modern Favicon Pack?
In 2010, a single 16×16 favicon.ico was enough. In 2026, browsers, iOS, Android, and Progressive Web Apps each request different assets. A complete pack now includes:
- favicon.ico — a multi-resolution Windows ICO containing 16×16, 32×32, and 48×48 bitmaps. Still requested by older browsers, Windows pinned shortcuts, and many RSS readers.
- favicon-16x16.png & favicon-32x32.png — preferred by modern browsers on retina displays.
- apple-touch-icon.png (180×180) — Safari uses this when a user adds your site to the iOS Home Screen.
- icon-192.png and icon-512.png — Android Chrome and PWA installers reference these via
site.webmanifest. - site.webmanifest — a tiny JSON file that lets Android, Chrome and Edge install your site as an app.
The Required HTML Snippet
Once your files sit at the site root, paste this inside <head>:
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />Step-by-Step: Generate the Whole Pack
- Open the tool — go to our Favicon Generator.
- Upload your source image — a square 512×512 PNG with transparency works best. SVG and JPG are also supported.
- Pick a background — keep it transparent for browser tabs, or pick a brand color (iOS will fill transparent areas with black on the home screen, so a solid color is recommended for that asset).
- Add padding if needed — if your logo touches the edges, push it inward 10–20% so it doesn't feel cramped at 16px.
- Choose corners — Square for a classic favicon, iOS-style (20% radius) for a modern look, or Circle (50%) for avatar-style brands.
- Download the ZIP — you'll get the .ico, all PNG sizes, the webmanifest, and the HTML snippet — ready to drop into your site root.
Common Mistakes to Avoid
- Shipping only a 16×16 PNG — looks blurry on every retina device.
- Using a transparent apple-touch-icon — iOS fills transparency with solid black. Always use an opaque background for the iOS icon.
- Designing at 16×16 from scratch — start big (512×512) and let the browser scale down. The other way around never works.
- Forgetting cache busting — if you replace your favicon, browsers may cache the old one for weeks. Append
?v=2to the filename until users see the new one. - Skipping the webmanifest — without it, Android won't show your "Install app" prompt.
Privacy: Why Local Generation Matters
Most online favicon generators upload your logo to a server. That's fine for public branding — but if you're working on an unreleased product, a client confidential, or anything under NDA, your logo shouldn't leave your device. Our Favicon Generator does every step in your browser using the Canvas API: cropping, resizing, .ico encoding, and ZIP packaging. Nothing is uploaded.
Need to Prep Your Image First?
If your source image isn't square, our Crop Image tool lets you square it up first. To shrink an oversized PNG before generating, use Resize Image. To switch formats, try Convert Image.
Ready to ship a polished favicon? Try the free Favicon Generator — every size, .ico included, zero upload.
Ready to try it?
Open Favicon GeneratorShare this page