Upload one square image and this generator produces every favicon size a modern site needs, plus the exact HTML to drop into your <head>. It resizes in your browser, so your logo is never uploaded to a server. The result is the small icon that shows in browser tabs, bookmarks, and on phone home screens when someone saves your site.
The sizes that matter, and where they show up
Old generators spat out a dozen sizes. In practice you need a handful:
- 16×16 — the classic browser-tab favicon; still used by some browsers and bookmark lists.
- 32×32 — the workhorse tab icon on modern high-DPI displays.
- 180×180 — the
apple-touch-icon, used when someone adds your site to an iOS home screen. - 192×192 — Android home-screen icon, referenced from the web app manifest.
- 512×512 — the large PWA install icon and splash screen source.
What to upload for a sharp result
Start with a square image at least 512×512, ideally a PNG with a transparent background. The single most important rule: simplify the mark first. A logo with a tagline or fine text becomes an unreadable smudge at 16×16. If your full logo is busy, upload just the symbol or a single bold letter. It is far better to have a clear letter than a crushed miniature of a detailed wordmark.
Adding it to your site
Put the files at your site root (or an /icons/ folder) and paste the generated tags inside <head>. A typical modern setup looks like this:
<link rel="icon" href="/favicon.ico" sizes="any">— the root fallback.<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">— the crisp tab icon.<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">— iOS home screen.- A
manifest.jsonreferencing the 192 and 512 PNGs for Android and PWA installs.
If the icon won't update, it's the cache
Browsers cache favicons harder than almost anything else — sometimes for days. After deploying a new one, hard-refresh with Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac). Still stuck? Open the icon's URL directly to confirm it loads, or append a version string like ?v=2 to the link tag to force a fresh fetch. The favicon is almost always fine; the old one is just stuck.
When you don't need the full set
If you're building a quick internal dashboard or a throwaway prototype, a single favicon.ico at the root is enough — skip the Apple and Android icons entirely. The full set earns its keep on public, mobile-facing sites where people bookmark or install to a home screen. My recommendation for anything real, though: generate the complete set once. It takes seconds and you never have to revisit it.
FAQ
What favicon sizes do I actually need in 2026?
+
A 32×32 for browser tabs, a 180×180 apple-touch-icon for iOS, and 192×192 plus 512×512 PNGs for Android and PWA installs. A 16×16 is a nice extra for older browsers. You don't need the dozens of sizes older tools produced.
What image should I upload?
+
A square image at least 512×512, ideally a PNG with a transparent background and a simple mark. Detailed logos with small text turn to mush at 16×16 — simplify to the symbol or a single letter before uploading rather than shrinking a busy full logo.
Where do I put the files and HTML?
+
Place the files at your site root or an icons folder, then paste the provided <link> and <meta> tags inside <head>. Browsers auto-request favicon.ico at the root, but explicit link tags give you control over sizes and the apple-touch-icon.
Why isn't my new favicon showing up?
+
Favicon caching is aggressive, sometimes lasting days. Hard-refresh (Ctrl+Shift+R or Cmd+Shift+R), open the icon URL directly to confirm it loads, or add ?v=2 to the link tag to force browsers to fetch the new file.
Do I still need an ICO file?
+
Not strictly — modern browsers use PNG favicons happily. ICO stays useful for the automatic favicon.ico root request and older Internet Explorer, which is why most setups still include one alongside the PNGs.