Favicon Sizes: The Complete Guide for Every Device (2026)

The favicon is the smallest piece of branding on the web and one of the most overlooked. It is the little icon in the browser tab, the bookmark, the history list, the Google search result, and the home-screen shortcut. Get it right and your site looks polished and recognizable; get it wrong and you get a blurry blob or a generic globe. The catch is that "the favicon" is really several images at several sizes. Here is exactly what you need in 2026 — the short answer, the full table, and the markup to paste.

The Short Answer

Ship 16×16, 32×32 and 180×180 PNGs, plus a multi-size favicon.ico at your site root. If you have a web app manifest (any PWA or "Add to home screen" flow), add 192×192 and 512×512. An optional SVG covers modern browsers at every size. That set covers every device in common use.

Why One Size Is Not Enough

Different places display your icon at different resolutions. A browser tab shows a tiny 16×16 version, while an Android home-screen shortcut wants a crisp 192×192 or larger. If you supply only one size, the browser scales it — and downscaling a large icon often turns fine detail into mush, while upscaling a tiny one looks pixelated. Supplying purpose-built sizes keeps your icon sharp everywhere.

Every Favicon Size and Where It Is Used

Google Search uses a favicon of at least 48×48 (or a multiple of 48) next to results on mobile and desktop, and pulls it from your homepage's <link rel="icon">. A multi-size favicon.ico that includes 48×48 satisfies this without any extra tags.

The HTML to Paste into <head>

This is the complete, modern set. Order matters slightly: browsers take the first matching icon, so list the SVG first for browsers that support it, then PNG fallbacks.

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

And the matching site.webmanifest for Android and PWA icons:

{
  "name": "Your Site",
  "short_name": "Site",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

ICO, PNG, or SVG?

ICO is the legacy format that can bundle multiple sizes in one file (favicon.ico) and is still the safest fallback — many browsers and tools request /favicon.ico by convention even with no tag. PNG is the modern workhorse: one file per size, crisp transparency, universal support. SVG favicons scale infinitely from a single file and are supported by Chrome, Edge, Firefox and Opera, but Safari still falls back to PNG, so ship SVG alongside PNG and ICO rather than instead of them.

How to Generate Every Size at Once

You do not need to export seven files by hand. The Toolism Favicon Generator runs in your browser — the source image is never uploaded:

1. Open the Favicon Generator.
2. Upload a square source image, ideally 512×512 or larger so every generated size stays sharp. (Need to crop or resize first? Use the Image Resizer.)
3. The tool produces the full set of standard sizes, including the multi-size .ico.
4. Download the icons, drop them in your site root, and paste the <head> snippet above.

Design Tips for a Tiny Canvas

• Simplify ruthlessly. A full logo with text is unreadable at 16×16. Use a single bold symbol, monogram, or initial.
• Start square and large. Design at 512×512 and scale down so detail survives, rather than blowing up a small image.
• Use high contrast. The icon should read clearly against both light and dark browser themes — test it on a dark tab bar.
• Test at actual size. Zoom out to 16×16 and check it is still recognizable — what looks great large can vanish when shrunk.
• Mind the transparency. Decide whether you want a transparent background or a solid shape; both work, but be deliberate. Apple touch icons get their corners rounded automatically and do not support transparency, so give that one a solid background.

Common Mistakes

• Only shipping a 512×512 PNG. Browsers will downscale it to 16 px and it will look muddy. Always include the small sizes.
• Forgetting favicon.ico at the root. Some crawlers and older browsers request it blindly; a 404 there is a missed branding opportunity.
• Caching surprises. Browsers cache favicons aggressively. After changing yours, add a query string (/favicon.ico?v=2) or hard-refresh to see the new one.
• Non-square source images. Every favicon size is square; a rectangular source gets squashed. Crop first.

A favicon is small but it is everywhere your brand appears in a browser. Supply the right sizes, keep the design simple, and the Favicon Generator turns one good square image into a complete, sharp icon set in seconds.