Favicon Sizes: What Your Website Actually Needs
A favicon is one small square of artwork that a browser requests at particular sizes, so a site needs a few purpose-built renditions rather than a single export scaled into every slot. Which pixels each context asks for, why a multi-size .ico still earns its place, and how the pieces are declared is below; to build the whole set from one image, the favicon generator linked from this guide produces the files and the tags.
Free and local: it renders the multi-size .ico, the PNG renditions, and the paste-ready link tags, and packs them into a single ZIP.
generate the whole favicon set from one image →What a favicon is and where it appears
A favicon is the small image a browser shows for a site outside the page itself: on the tab strip, beside the bookmark, in the history list, on a phone home screen when the site is added there, and on the taskbar if the site is installed as an app. The name is short for favorite icon, and the mechanics are simpler than the name suggests — a browser asks the site for one or more image files, picks whichever matches the space it has to fill, and draws it at that size. That last part is why the correct sizes matter. If the only file available is a 512 pixel logo, the browser has to shrink it to 16 pixels, and thin lines, gradients and small text disappear in the process. A set of purpose-built renditions gives the browser a sharp option for each slot instead of one image stretched or crushed into every one.
The sizes that matter, and what each one is for
Five sizes cover the modern web. A 16 by 16 icon is the classic browser tab size. A 32 by 32 icon serves the same slot on dense screens and looks better in a bookmarks bar. A 48 by 48 rendition lives mainly inside a multi-size .ico file, where it feeds older Windows contexts and any desktop shortcut a visitor creates from the page. A 180 by 180 PNG is the apple-touch-icon, the image iOS uses when a site is added to the home screen; without it, iOS falls back to a screenshot of the page. The 192 and 512 pixel pair belongs to the web app manifest, where Android takes the smaller one for the launcher and the larger one for splash screens and store listings. If the site has no manifest and nobody installs it, the 16, 32 and 180 files are the ones that will actually be seen. Everything else is supporting cast: worth shipping, but not the reason the tab looks right.
ICO, PNG or SVG: what each format is good at
An .ico file is a container rather than an image format. It holds several raster renditions of the same artwork, commonly 16, 32 and 48 pixels, and each reader pulls out the entry that fits. That makes it the most compatible single file a site can ship, and it is what a browser fetches automatically from the site root when the page declares nothing. A PNG holds exactly one size, which is fine because the markup can name several PNG files and let the browser pick. Every current browser understands PNG icons, and PNG is also what an apple-touch-icon and the manifest icons expect. SVG is different again: it describes the artwork rather than storing a grid of pixels, so a single file stays sharp at any size. Support is not universal, however, and a browser that cannot read an SVG favicon is left with only its fallback. The practical arrangement is all three in their places: an .ico for compatibility, PNGs for the sizes worth choosing deliberately, and an SVG as an extra layer where it is understood, never as the only option.
How a browser decides which icon to use
When a page loads, the browser reads the icon links in its head and builds a small table of what is on offer: file, format and declared size. When it needs to draw an icon, it looks for an entry matching that slot — a tab strip, a bookmark on a dense screen, a home-screen shortcut — and if several could work, it prefers the closest declared size and the more capable format. If the page declares nothing, the browser asks for /favicon.ico at the site root as a last resort, which is why keeping that file in place is a sensible default even on sites that also list PNGs. Two details cause most of the confusion. Declared sizes that do not match the actual artwork mislead that table, so a file labeled 32 but drawn at 16 can be picked for a slot it cannot fill sharply. And icons are cached harder than almost anything else on a site, so a replacement can take a while to appear; checking in a private window or a fresh profile shows what a new visitor receives.
Making the whole set from one square image
Start with square artwork. A generator renders each icon onto a square canvas, so a wide logo gets squeezed horizontally rather than cropped or padded, and no amount of correct file naming repairs a distorted drawing. A source of 512 by 512 pixels or larger gives the bigger renditions real detail to work with; solid shapes and strong silhouettes read better at tab size than fine lettering does, so simplify the mark if a small preview turns into a smudge. From there, the favicon generator linked from this guide takes a PNG, JPG, WebP or SVG and produces the complete pack in one download: a multi-size favicon.ico holding the 16, 32 and 48 pixel renditions, separate PNG files at each of those sizes, the 180 pixel apple-touch-icon, and the 192 and 512 pixel manifest icons, plus a readme with setup notes. If the only thing needed is the .ico container — for a Windows application, or to refresh a legacy set — the PNG to ICO tool builds one from any image and lets you choose which sizes go inside it.