Favicon Sizes and Formats: The Minimum Set for 2026

Favicon Sizes and Formats: The Minimum Set for 2026

A current site needs four icon sources: a favicon.ico at the root, an SVG favicon for browsers that support it, a 180 by 180 pixel apple-touch-icon PNG, and a web app manifest listing 192 and 512 pixel PNGs, ideally with a padded maskable version. Keep a square raster favicon larger than 48 pixels, because Google Search does not accept SVG.

That last point catches sites that switched to a single modern SVG: it looks sharp in a browser tab and leaves Google with no favicon in a format it supports. Each file in the set covers a job no other file can do, and even the official sources disagree on details, including two web.dev articles that give opposite advice on maskable icons.

What Each File Is For

Start from the places an icon actually appears, then match a file to each one.

The last row is not a separate file in practice. Google accepts the same link tags browsers read, including the ICO and the apple-touch-icon, so one of those files covers Search as long as it meets Google's rules. That point gets its own section below, because it changes how you write the markup.

How Browsers Pick Among Several Icons

Most confusion about favicons comes from not knowing how a browser chooses when a page declares more than one. The WHATWG HTML Standard spells it out: the user agent "must select the most appropriate icon according to the type, media, and sizes attributes", and "if there are multiple equally appropriate icons, user agents must use the last one declared in tree order" (HTML Standard, link type icon). If the chosen file turns out to be unusable, for example in a format the browser cannot read, it moves on to the next most appropriate one.

Two consequences follow:

1. Order matters when attributes tie. If two icons look equally suitable, the later one wins. Put the file you prefer second.
2. Type hints let browsers skip what they cannot use. A browser without SVG icon support can ignore a link marked as image/svg+xml and fall back to the ICO.

The same section covers the case where a page declares nothing at all: browsers may request /favicon.ico from the site root by default. MDN adds that Apple devices likewise request /apple-touch-icon.png and size-suffixed versions from the root, and then gives the reason to declare links anyway: "providing explicit links protects you against changes to these conventions" (MDN, the link element). So put the two files at the root paths and link them explicitly.

What the sizes attribute means

The spec defines sizes in raw device pixels, not CSS pixels. A value such as 32x32 means the file contains a 32 by 32 bitmap; several values separated by spaces mean the file contains several bitmaps, which only formats like ICO can do. The keyword any means a scalable icon, "e.g. as provided by an SVG image". MDN notes that most formats hold a single image, so sizes usually has one entry, while "Microsoft's ICO format and Apple's ICNS format can store multiple icon sizes in a single file".

favicon.ico: Still the Foundation

ICO is an old Windows container format, and it is still first on this list for two practical reasons: it is the file browsers request by default at /favicon.ico, and MDN's guidance is that ICO "has better browser support" than other formats when cross-browser support matters.

What goes inside. No standard fixes the sizes packed into a favicon.ico. The WHATWG spec's own example declares a Windows icon file with sizes="32x32 48x48". As a working example, a file containing 16, 32 and 48 pixel versions gives the browser a 16 pixel image for a standard-density tab, twice that for a display with two device pixels per CSS pixel, and the 48 pixel size from the spec example. Every extra size adds weight to a file that new visitors download.

Draw the small sizes, do not just shrink them. A 16 by 16 bitmap has 256 pixels in total. A detailed logo scaled down to that grid becomes grey mush, because thin strokes fall between pixels and get averaged away. Simplify: use a single letter, a monogram or the bolder part of the mark, and redraw the 16 pixel version so its main strokes land on whole pixels. Those two skills, aligning strokes to the pixel grid and balancing optical weight, decide whether a favicon is legible, and our principles for designing interface icons cover both in detail.

Worked check. Suppose a wordmark is 600 pixels wide and its letter strokes are 24 pixels thick. Scaled to fit a 16 pixel favicon, the factor is 16 ÷ 600 = 0.0267, so each stroke becomes 24 × 0.0267 = 0.64 pixels: less than one pixel, so it will render as a faint smudge. That number tells you before you export that the wordmark cannot work as a favicon and a simplified mark is needed.

The SVG Favicon and Dark Mode

An SVG favicon is one small file that stays sharp at any size and any pixel density. Its larger advantage is that an SVG can carry its own CSS, including a media query for the visitor's colour scheme.

web.dev's article on building an adaptive favicon describes exactly that: the SVG "can also have embedded CSS, even embedded media queries", so it "adapts using its embedded styling for light and dark user preferences" (web.dev, building an adaptive favicon). The article, last updated in February 2022, reported support "in Firefox and Chromium based browsers" at the time of writing. Support may have changed since, so test in the browsers your audience uses, and treat the ICO as the fallback for everyone else.

A minimal adaptive favicon looks like this:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    rect { fill: #111111; }
    @media (prefers-color-scheme: dark) {
      rect { fill: #f5f5f5; }
    }
  </style>
  <rect x="4" y="4" width="24" height="24" rx="5"/>
</svg>

The prefers-color-scheme media feature has two values, light and dark (MDN, prefers-color-scheme). Note what the query tracks: the visitor's preference, not the colour of the tab. A browser in dark mode with a light tab strip, or the reverse, can still give poor contrast, which is why some designers avoid switching colours and instead give the icon its own solid background shape that reads on any tab colour. The dark mode design guide covers that trade-off for logos and other brand marks.

Keep the SVG small and clean: no embedded raster images, no editor metadata, no unused definitions. Our guide to cleaning up SVG markup walks through what to strip and what to keep, and a favicon is an SVG that every first-time visitor downloads, so the savings apply on every new visit.

apple-touch-icon: What Apple's Documents Actually Say

Apple's current Human Interface Guidelines did not give us a size table for web clips we could read and cite, so this section relies on what Apple's archived web documentation and MDN state.

Apple's Safari Web Content Guide (in Apple's documentation archive, last updated December 12, 2016) explains the mechanism (Apple, Configuring Web Applications):

• For a site-wide icon, place a PNG named apple-touch-icon.png in the root document folder.
• Different sizes can be declared with a sizes attribute on each apple-touch-icon link; the example markup lists 152x152, 167x167 and 180x180 files, with the 180 file named for the high-resolution iPhone.
• If no icon matches the device's preferred size, "the smallest icon larger than the recommended size is used", and if none is larger, the largest available is used.

MDN's link element reference repeats the same set in its example and labels 180x180 as the size for a "3x resolution iPhone", 167x167 for iPad Pro and 152x152 for non-Retina iPad.

Put those rules together and a single 180 by 180 PNG is a sound minimum: it matches the largest size in Apple's own example, and under Apple's fallback rule a device that wants a smaller icon will scale the next size up, which is this one. Separate 152 and 167 files are optional refinements, worth adding only if you redraw them by hand.

Two practical points the archived page mentions or implies:

• Make the PNG opaque and square. The archived guide says Safari on iOS 7 does not add effects to icons, and that older versions skipped effects for files with a -precomposed suffix. Design the full square with its own background colour rather than relying on the device to add one.
• Google reads it too. Google Search lists apple-touch-icon and apple-touch-icon-precomposed among the rel values it supports for favicons, so this file can end up as your Search icon.

Web App Manifest Icons: 192, 512 and Maskable

The web app manifest is a JSON file that describes the site as an installable app: name, colours, start URL and icons. You link it from every page with a link element whose rel is manifest. web.dev notes the request for the manifest is made without credentials, so a manifest behind a login needs crossorigin="use-credentials" (web.dev, add a web app manifest).

Sizes. web.dev states the Chromium requirement directly: "you must provide at least a 192x192 pixel icon and a 512x512 pixel icon", and Chrome scales those to fit other surfaces. If the site is not meant to be installed, the manifest is optional, but it costs one small JSON file and two PNGs, and it controls what Android shows when someone adds the site to a home screen.

Purpose. The W3C Web Application Manifest specification (a Working Draft, latest version dated October 16, 2026) gives each icon a purpose (W3C Web Application Manifest):

• any: the default. The browser may use the icon anywhere.
• maskable: "designed with icon masks and safe zone in mind", so the platform may crop it to its own shape.
• monochrome: only the alpha channel is used, for places that need a single-colour silhouette.

The maskable safe zone, worked out

The spec defines the safe zone as a circle centred on the icon whose radius is two fifths (40 percent) of the icon's smaller dimension. web.dev's maskable icon article gives the same figure, a circle "with a radius equal to 40% of the icon width", and warns that content outside it "might be cropped on some platforms" (web.dev, adaptive icon support with maskable icons).

Here is what that means in pixels:

The last column is the diameter divided by the square root of 2 (409.6 ÷ 1.4142 = 289.6). It answers the question designers actually ask: how big can a square logo be on a maskable icon? On a 512 canvas, keep a square mark within about 289 pixels and centred. A round mark can use the full 409 pixel circle. Fill the whole canvas, edge to edge, with the background colour, because the platform's mask decides how much of it shows.

When web.dev disagrees with web.dev

The two web.dev articles conflict on one point. The add-manifest article (updated September 2024) tells you to add "any maskable" to an icon's purpose so one file serves both roles. The maskable icon article (updated December 2019) advises against combining them, because a maskable icon used as an any icon carries padding it does not need and looks undersized. The W3C spec allows a list of purposes, so both are valid manifests.

We recommend separate entries: a normal icon with purpose any, and a dedicated padded file with purpose maskable. That costs one extra PNG and avoids the shrunken look on surfaces that do not mask.

A manifest icons block with that structure:

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

web.dev's manifest article also notes that if you list SVG icons in a manifest, you should "always specify a rasterized icon as a fallback". The PNG entries above serve that role.

App icons for iOS, Android and installed web apps follow different geometry from the manifest icons above; the app icon sizes guide gives the tables for each platform.

What Google Search Requires

Google's favicon documentation for Search (last updated August 28, 2026) is short and strict (Google Search Central, define a favicon):

• Shape and size. The favicon "must be a square (1:1 aspect ratio) that's at least 8x8px", and Google recommends "a favicon that's larger than 48x48px so that it looks good on various surfaces". Older advice that the size must be a multiple of 48 pixels does not appear in the current page.
• Formats. "BMP, GIF, ICO, PNG, JPEG, PPM, and TIFF." SVG is not on the list. A site that declares only an SVG favicon gives Google nothing it supports.
• Link tags. Google reads rel values icon, shortcut icon, apple-touch-icon and apple-touch-icon-precomposed, in a link tag placed in the head of the home page.
• One per site. Google supports one favicon per hostname. A subdirectory such as example.com/news cannot have its own.
• Crawlable and stable. Googlebot-Image must be able to crawl the favicon file and Googlebot the home page, and "the favicon URL must be stable (don't change the URL frequently)".
• Patience and no guarantee. Recrawling can take several days to several weeks, and a favicon "isn't guaranteed to appear in Google Search results, even if all guidelines are met".

The practical reading: the ICO link and the apple-touch-icon link already give Google a supported, square raster. Make sure at least one of them contains an image larger than 48 by 48, which the 180 pixel touch icon does, and that neither path is blocked in robots.txt.

The Markup, All Together

This head block covers every file in the minimum set. The two icon lines are the pair web.dev publishes in its adaptive favicon article: the ICO first, then the SVG with its type, so that browsers that can use the SVG pick it and others fall back to the ICO.

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

A caveat on the first line. The WHATWG spec defines sizes="any" as a marker for scalable images such as SVG, and its own ICO example lists real pixel sizes instead. Writing the ICO's actual sizes would match the spec more closely, but none of the sources we checked shows that variant paired with an SVG, and a browser that rated an exactly sized ICO above an unsized SVG would never load your dark-mode icon. If you change the value, check in each browser you support which file the tab actually requests.

The apple-touch-icon link carries no sizes attribute because there is only one file; add sizes values only if you ship several. The manifest file name is your choice, as long as the link points to it and the server sends it correctly.

Caching: Updating an Icon Without Breaking Anything

Favicons are cached like any other file, and an updated icon may not show for visitors who have the old one stored. The general HTTP caching advice from web.dev is that "versioned URLs are a good practice because they make it easier to invalidate cached responses": change the URL when the content changes, and long cache lifetimes such as max-age=31536000 become safe for those versioned files (web.dev, HTTP cache). For URLs that do not change, the same article recommends no-cache, which makes the browser revalidate each time, ideally with an ETag.

That advice collides with Google's rule that the favicon URL "must be stable". Here is how to satisfy both:

The pattern: stable names on the paths other systems look for by convention, versioned names on files you reference only from your own markup or manifest. A rebrand still needs patience, because Google's recrawl takes days to weeks whatever your headers say.

Common Favicon Mistakes

Only an SVG favicon. It looks sharp in supporting browsers, and gives Google Search nothing in a supported format. Keep the ICO.

A transparent touch icon. Transparent corners on an apple-touch-icon depend on whatever the device puts behind them. Fill the square with a background colour.

The full logo, scaled down. Wordmarks and detailed marks fail below 32 pixels. Run the stroke-width check from the ICO section and design a simplified mark. The logo font guidance in our guide to choosing a logo typeface includes a 16 pixel favicon test for exactly this reason.

A maskable icon with the logo at the edges. Anything outside the 40 percent safe circle can be cropped. Use the pixel table above.

A non-square image. Google requires a 1:1 aspect ratio, and every size in the minimum set is square. Crop the canvas square before export rather than leaving the result to each platform.

Blocking the icon path. A robots.txt rule that blocks an assets folder can block the favicon from Googlebot-Image. Check the path against your robots rules.

Renaming favicon.ico to bust the cache. It fixes the tab for returning visitors and breaks the stable-URL rule for Search. Use revalidation on the stable path instead.

Shipping 20 files from an old checklist. Older favicon checklists include Windows tile files, long runs of PNG sizes and legacy meta tags. Each line is something to maintain, and none of the current sources cited here asks for them.

JPEG favicons. Google accepts JPEG, but JPEG has no transparency and adds compression artefacts at tiny sizes. PNG inside an ICO, or a plain PNG, is the better raster choice. The format-by-format comparison of PNG and JPEG explains why PNG suits flat-colour graphics and JPEG does not.

Launch Checklist

If the same artwork also appears in responsive image slots across the site, the srcset and sizes guide covers serving the right raster size for each layout, which is a different problem from the fixed sizes here.

Favicon Questions

What size should a favicon be?

There is no single size, because different surfaces ask for different files. The minimum set is an ICO with small sizes such as 16, 32 and 48 pixels inside, a scalable SVG, a 180 by 180 apple-touch-icon, and 192 and 512 pixel PNGs in the manifest, plus a recommended padded maskable icon. For Google Search, the image must be square and at least 8 by 8, and Google recommends larger than 48 by 48.

Do I still need favicon.ico in 2026?

Yes. Browsers may request /favicon.ico by default when no icon is declared, MDN describes ICO as the format with better cross-browser support, and Google Search accepts ICO but not SVG. The ICO is the file that keeps working when everything else is unsupported.

Can I use only an SVG favicon?

You can, but you give up the fallback for browsers without SVG icon support and you lose the favicon in Google Search, which does not list SVG among its supported formats. Pair the SVG with an ICO or PNG.

Is the apple-touch-icon size 180 or 192?

Use 180 by 180 for the apple-touch-icon. That is the largest size in the example markup of Apple's archived Safari documentation and the size MDN labels for 3x iPhones. The 192 pixel figure belongs to the web app manifest, where Chromium requires it.

Why does my old favicon still show after I changed it?

Caching, in the browser and in Google. Browsers keep the old file until their cached copy expires or is revalidated; serving the stable paths with revalidation (no-cache plus an ETag) shortens that. Google's own recrawl can take days to weeks, and its documentation says the favicon URL should stay stable, so do not rename the root files to force an update.

What is a maskable icon and do I need one?

It is a manifest icon designed with padding so that Android can crop it into its own shape without cutting the logo. You need one if you want the installed icon to fill the shape properly; without it, a normal icon is shown smaller on a white background. Keep the logo inside a centred circle with a radius of 40 percent of the canvas.

Next: Pick the Right Format for Every Other Image

The favicon set is the one place where file formats are fixed by convention. Everywhere else on a site you choose, and the SVG, PNG, JPEG, WebP and AVIF comparison gives the decision rules for logos, photos and interface graphics, with the trade-offs in file weight that a favicon never has to worry about.

Where These Facts Come From

• WHATWG, HTML Living Standard, link type "icon", https://html.spec.whatwg.org/multipage/links.html#rel-icon: selection by type, media and sizes; last equally appropriate icon wins; sizes in raw pixels; any for scalable icons; /favicon.ico default request; ICO example with 32x32 48x48. Checked October 22, 2026.
• MDN Web Docs, "link: The External Resource Link element", https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/link: sizes attribute, ICO holding multiple sizes and its broader support, apple-touch-icon example sizes 120, 152, 167 and 180, automatic /favicon.ico and /apple-touch-icon.png requests. Checked October 22, 2026.
• MDN Web Docs, "prefers-color-scheme", https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme: light and dark values, use inside SVG. Checked October 22, 2026.
• web.dev, "Building an adaptive favicon" (last updated February 9, 2022), https://web.dev/articles/building/an-adaptive-favicon: media queries inside an SVG favicon, support in Firefox and Chromium at the time, ICO fallback markup. Checked October 22, 2026.
• web.dev, "Add a web app manifest" (last updated September 18, 2024), https://web.dev/articles/add-manifest: 192 and 512 pixel icons for Chromium, rel="manifest", credentials note, raster fallback for SVG icons, "any maskable" example. Checked October 22, 2026.
• web.dev, "Adaptive icon support in PWAs with maskable icons" (last updated December 19, 2019), https://web.dev/articles/maskable-icon: 40 percent safe zone radius, advice against combining any and maskable. Checked October 22, 2026.
• W3C, "Web Application Manifest" (Working Draft, October 16, 2026), https://www.w3.org/TR/appmanifest/: icons member, purpose values any, maskable and monochrome, default purpose any, safe zone radius of two fifths. Checked October 22, 2026.
• Apple Developer Documentation Archive, Safari Web Content Guide, "Configuring Web Applications" (updated December 12, 2016), https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html: apple-touch-icon.png at the root, sizes 152, 167 and 180 in example markup, size fallback rule, precomposed note. Checked October 22, 2026.
• Google Search Central, "Define a favicon to show in search results" (last updated August 28, 2026), https://developers.google.com/search/docs/appearance/favicon-in-search: square, at least 8x8, larger than 48x48 recommended, supported formats, supported rel values, one favicon per hostname, crawlability, stable URL, recrawl timing. Checked October 22, 2026.
• web.dev, "Prevent unnecessary network requests with the HTTP Cache" (last updated November 5, 2018), https://web.dev/articles/http-cache: versioned URLs, max-age=31536000 for versioned files, no-cache and ETag revalidation. Checked October 22, 2026.

The stroke-width check and the maskable safe-zone pixel table are our own arithmetic from the definitions above. The 16, 32 and 48 pixel ICO contents are an example, not a requirement from any of these sources.