Skip to content

Favicon specs

A favicon set needs five image sizes: 16 and 32 pixels for browser tabs, 180 for Apple devices, and 192 and 512 for Android, plus a favicon.ico with 16, 32 and 48 pixels inside. Every one must be square, and Google asks for at least 8 × 8 pixels but recommends larger than 48.

Favicon generatorUpdated 4 min read

The specs below are checked against Google, Apple, Chrome, MDN and WordPress documentation, so you can see where each number comes from.

Favicon sizes

  • favicon.ico (16, 32 and 48 px in one file): browser tabs, bookmarks and history. Browsers ask for /favicon.ico at the root of your site on their own, MDN notes, even with no tag.
  • 16 × 16 px PNG: the standard tab size.
  • 32 × 32 px PNG: tabs on sharp screens, and bookmarks.
  • 180 × 180 px PNG (apple-touch-icon.png): the iPhone and iPad Home Screen. Chrome's Lighthouse guidance suggests 180 or 192 px. Apple's example also lists 152 and 167 px for iPads, but iOS will scale the 180 px icon down if those are missing.
  • 192 × 192 and 512 × 512 px PNGs: listed in your web app manifest. web.dev says Chromium browsers need at least these two, and Chrome's installability check looks for both.

For Google Search results, Google says the favicon must be square (1:1) and at least 8 × 8 px, and recommends going larger than 48 × 48 px so it looks good everywhere it's shown. The 192 and 512 px icons cover that.

Favicon logo size

Design your icon as a square of at least 512 × 512 px and export the smaller sizes from it. WordPress uses the same number: its Site Icon must be square and at least 512 px wide and tall, and PNG is the recommended format.

A logo that reads well at 512 px can turn into a smudge at 16. Use the simplest part of your logo, such as the first letter or the symbol without the words, and check it at real tab size before you publish.

Favicon generator

Open the full tool

Formats

  • ICO: the oldest format and still the one browsers request by default. One .ico file can hold several sizes.
  • PNG: what every other icon in the set uses.
  • SVG: a vector favicon that scales to any size, linked with sizes="any". Useful as an extra, but not on its own.

Google Search lists BMP, GIF, ICO, PNG, JPEG, PPM and TIFF as supported favicon formats. SVG isn't on that list, and iOS uses PNG touch icons for the Home Screen, so keep PNG and ICO as your base.

The generator above makes favicon.ico and the PNGs. It doesn't make an SVG favicon; if you have an SVG logo, upload it and it's drawn into the PNG and ICO sizes.

The tags for your head

These lines go in the <head> of every page, with the files in your site's root folder:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<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">

When there are several rel="icon" links, MDN says the browser chooses one using their type, sizes and media attributes. MDN also says the old rel="shortcut icon" is non-conforming, so use plain icon. For the step-by-step version, see how to add a site icon in HTML.

Rules for Google Search

Google adds a few rules on top of the sizes:

  • Link the favicon from your home page. Google shows one favicon per hostname, so shop.example.com can have its own but example.com/shop can't.
  • Let Googlebot crawl the home page and Googlebot-Image crawl the icon file. Don't block either in robots.txt.
  • Keep the favicon's address stable instead of changing it often.
  • Make it represent your brand. Google replaces inappropriate icons with a default one.

Even when you follow every rule, Google says a favicon isn't guaranteed to appear, and picking up a new one can take from several days to several weeks.

Apple touch icon specs

The Apple touch icon should have a background that isn't transparent, Lighthouse says. If a page has no touch icon at all, iOS makes one from a screenshot of the page. More in the Apple touch icon guide.

Sources

Questions

What is the ideal size for a favicon?

There isn't one size. Browsers use 16 and 32 px, iPhones and iPads use 180 px, and Android uses 192 and 512 px. Design once at 512 px and export the rest from it.

What is a favicon 32x32 PNG?

It's the favicon drawn at 32 × 32 pixels and saved as a PNG. Browsers use it on sharp screens, where a 16 px icon would look blurry, and it's linked with sizes="32x32".

Should I use PNG or SVG for a favicon?

Use PNG and ICO as your base, because every browser reads them and Google Search lists both. SVG isn't on Google's list. You can add an SVG favicon as an extra link if you want one that scales.

What size should my logo be for a favicon?

Start from a square version of at least 512 × 512 px, which is also the minimum WordPress asks for. Use the simplest form of your logo, because detail disappears at 16 px.