Favicon size: which sizes you need and how to export them

A favicon is the small icon in the browser tab, the bookmark list, the phone home screen and next to your site name in Google. One image cannot do all of those jobs well, so a modern site ships a small set of files. Here is the exact set we export for client sites, and why each one exists.

The favicon sizes you actually need

You do not need the 20 or more files some generators produce. For almost every website, these five cover browsers, phones and Google Search:

So the short answer to "what size is a favicon" is 32 x 32 px for the browser tab, with larger copies for everything else. The classic 16 x 16 px size still matters on standard density screens, which is why it often sits inside the ICO file next to the 32 px version.

Start from a 512 px or larger source

Design the favicon once, at a large size, and export every file from that master. A square of at least 512 x 512 px is the practical minimum, and WordPress asks for exactly that for its Site Icon. MDN recommends designing app icons at 1024 x 1024 px or as a scalable file. If your logo exists as a vector (SVG, AI or EPS), use it as the source so every export stays sharp. If you only have a blurry PNG, fix that first: our guide on how to vectorize a logo shows the options.

Do not simply shrink your full logo. A horizontal logo with a name and tagline turns into a grey smudge at 16 px. Use the icon or monogram version of the logo instead, the same version you would use for a social profile picture. Our logo sizes guide lists where else that icon version is needed.

ICO, PNG or SVG: which favicon format?

• ICO is the oldest format and still the safest fallback. One .ico file can contain several sizes, so a single favicon.ico with 16, 32 and 48 px versions covers legacy browsers.
• PNG is the everyday format for modern browsers, Apple touch icons and manifest icons. It supports transparency and exports from any design tool.
• SVG stays crisp at every size and can include a dark mode color rule. It is a nice extra, but not a replacement for the files above: Google Search lists BMP, GIF, ICO, PNG, JPEG, PPM and TIFF as supported favicon formats, and SVG is not on that list.
• JPG works technically but has no transparency and adds compression noise to small icons, so skip it.

For a deeper look at each file type, see logo file formats explained.

The HTML to add to your site

If you build sites by hand, put these lines in the head of every page and upload the files to your site root:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

The manifest file lists the 192 and 512 px icons. If you want Android to show your icon inside a circle or rounded shape without cutting it off, add a third icon with "purpose": "maskable" and keep the important part of the design inside the central circle that covers 80% of the icon, on a solid background.

Favicon sizes in Webflow and WordPress

Most site builders generate the extra sizes for you, so you only upload one good square image.

One Webflow detail people miss: the uploaded file name appears in your page HTML, so name it something clean like brand-icon.png rather than final-final-v3.png.

How to design a favicon that reads at 16 px

1. Pick one shape. A letter, a monogram or the symbol from your logo. Never the full lockup with text.
2. Work on a square canvas of 512 or 1024 px and leave a little padding so the mark does not touch the edges.
3. Simplify. Remove thin lines, small gaps and gradients. Anything thinner than about 1 px at 16 px size disappears.
4. Check contrast on light and dark tabs. Browser tabs can be white, grey or almost black. A dark mark on a transparent background vanishes in dark mode, so add a background shape or a separate dark mode version.
5. Preview at real size. Export a 16 and 32 px version and look at them at 100% zoom next to other tabs before you publish.
6. Export the full set from the table above, with a solid background on the Apple touch icon, because iOS can show transparent areas as black.

From the studio: when a client logo is a wide wordmark, we draw a separate favicon mark instead of cropping one letter out of the logo. A letter cut from a wordmark keeps the logo's thin strokes and spacing, which were designed for 200 px wide, not 16. Redrawing it with heavier strokes for small sizes takes about an hour and fixes most "blurry favicon" complaints.

Why your favicon is not showing in Google

Google uses its own rules for the icon next to your site name in search results:

• The icon must be square and at least 8 x 8 px, and Google recommends using one larger than 48 x 48 px.
• It must be declared with a rel="icon" link on the home page, and both the home page and the icon file must be crawlable by Googlebot and Googlebot-Image.
• The icon URL should stay stable. Changing it often delays updates.
• Google shows one favicon per hostname, so a blog on a subdomain can have its own icon.
• After a change, it can take several days to several weeks to update, and Google does not guarantee it will show at all.

If the icon looks right in the browser but not in search, check that your robots.txt does not block the file and that the PNG is larger than 48 px. Our article on Webflow SEO covers the other basics worth checking at the same time.

Related guides

• Logo sizes for web, social and print
• How to make a logo transparent
• Our logo vectorization service