iResize

Favicon Sizes and Formats: A Complete Guide

Last updated: June 2026

A favicon is the little icon that appears in browser tabs, bookmark lists, history entries, and — increasingly — on phone home screens and desktop taskbars. For years a single favicon.ico in your site root was enough. It no longer is. Modern browsers and operating systems request the icon at several specific sizes for different surfaces, and serving the wrong size means a blurry tab, a pixelated bookmark, or a generic gray square where your branded home-screen icon should be. The good news is that the list is much shorter than the legacy tools that spat out twenty files would have you believe. This guide covers exactly which sizes and formats matter today, the HTML to wire them up, and how to produce the whole set in a couple of minutes.

Why one file is no longer enough

Each platform pulls the favicon for a different context, and each context has its own pixel budget:

  • Browser tabs and bookmarks use small raster icons, typically 16 × 16 and 32 × 32 (the 32 covers high-DPI tabs and the Windows taskbar).
  • Windows uses 48 × 48 for some shortcut and taskbar contexts.
  • iOS Safari uses an Apple touch icon at 180 × 180 when a user adds your site to their home screen.
  • Android and installable PWAs read 192 × 192 and 512 × 512 icons from a web app manifest — the 512 is also used for the splash screen.

You do not need 57 × 57, 72 × 72, 114 × 114, and the rest of the historical iOS roster. Apple now scales a single 180 × 180 touch icon, and modern Android relies on the manifest. The practical modern set is six raster sizes plus the .ico and manifest.

Formats that matter

A multi-resolution .ico still earns its place: it bundles the 16, 32, and 48 bitmaps into one file that legacy browsers and Windows reliably understand, and /favicon.ico is fetched by default even without a <link> tag. For the modern sizes, use PNG — it supports transparency and crisp edges at every size. Optionally, an SVG favicon can be served for browsers that support it; because it is vector, it stays sharp at any resolution and can even adapt to dark mode via a media query inside the SVG. SVG is a nice-to-have, not a replacement — keep the PNG and ICO as the dependable fallback.

The HTML you actually need

In your document <head>, four pieces do the work. A <link rel="icon" href="/favicon.ico" sizes="any"> points to the legacy bundle. Two more <link rel="icon" type="image/png"> tags reference the 16 × 16 and 32 × 32 PNGs with matching sizes attributes. A <link rel="apple-touch-icon" sizes="180x180"> handles iOS home-screen icons. Finally, <link rel="manifest" href="/site.webmanifest"> connects the Android and PWA icons. That is the whole set — five tags, no more.

What goes in site.webmanifest

The manifest is a small JSON file. At minimum it holds a name and short_name, an icons array containing the 192 × 192 and 512 × 512 PNGs (each with its src, sizes, and type), a theme_color, and a background_color. Add "display": "standalone" if you want the installed app to open without browser chrome. The theme_color tints the Android status bar, so match it to your brand.

Design tips

Design for the smallest size first: at 16px, fine detail and small text disappear, so favor a single bold glyph, monogram, or simple mark. Use either full transparency or a solid fill — a transparent PNG over the wrong tab color can vanish. Test in both light and dark browser themes, since a dark logo can disappear against a dark tab strip. If your source isn't square, square it up first with the image resizer so nothing gets cropped or stretched.

Generate the full package with iResize

The favicon generator produces every file above in one pass, entirely in your browser — nothing is uploaded. Step by step:

  • Pick a source. Upload an image (PNG or JPG; square works best), or switch to text mode and type 1–4 letters for a monogram, choosing a font and text color.
  • Set the look. Toggle the background fill on or off, pick its color, and adjust the corner radius. Live previews show how it reads as a tab icon and as a rounded iOS/Android tile.
  • Generate and download. You get a ZIP with favicon.ico (multi-size 16/32/48), favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png, the 192 and 512 Android icons, a ready-made site.webmanifest, and the exact <head> HTML to paste in.

Drop the files in your site root, paste the five tags, and you're done. If all you need is a standalone multi-size .ico from an existing logo, the icon converter handles that one job directly.

← Browse all guides