Favicon Size Guide

The short answer

A modern site needs only a few files. Many old guides list a dozen sizes, but today a short list covers every browser and device.

Why so many sizes?

A favicon is drawn at 16 by 16 pixels in a normal tab, and at 32 by 32 on a high density screen. Other places use the icon larger: a shortcut on a desktop, a phone home screen, a search result. Each place asks for a size, and a file made for that size looks sharper than a big one squeezed down.

Favicons in Google Search

Google can show your favicon next to your site in search results. Its documentation asks for a square image whose size is a multiple of 48 pixels, such as 48 by 48 or 96 by 96, and a single icon address for the whole site. A 48 pixel icon inside favicon.ico, or a 192 pixel PNG, meets this.

The code

<link rel="icon" href="/favicon.ico" sizes="any">
<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 lists the two larger icons:

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

An SVG favicon that follows dark mode

An SVG icon can contain a style rule, so it can change color when the browser is in dark mode:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    circle { fill: #2b5cb8 }
    @media (prefers-color-scheme: dark) { circle { fill: #9db7ee } }
  </style>
  <circle cx="16" cy="16" r="14"/>
</svg>

Designing for 16 pixels

• Use one simple shape or one letter. Fine lines and small text turn to mush.
• Use strong contrast, and test the icon on light and dark tabs.
• Start from a large square image or a vector, and let the tool shrink it.
• Leave a little padding for the Apple touch icon, and give it a solid background.

Check and preview your favicon

Drop your current favicon in the favicon size tool to list the sizes inside it and see whether it meets the 48 pixel rule. Then use the favicon preview to see it in light and dark tabs, a search result and on a phone.

When the old icon will not go away

Browsers keep favicons for a long time. After you replace the file, clear the browser cache, or open the site in a private window. You can also change the link address, for example /favicon.ico?v=2, to force a new download.

To make every file in this guide from an image, a letter or an emoji, use the favicon generator, or favicon from image. For one file, see PNG to ICO or the Apple touch icon maker.