Favicon sizes: which ones you actually need

A favicon is the small icon shown in browser tabs, bookmarks and search results.

Different devices ask for different sizes.

This guide lists the sizes that matter today, why each one exists, and the HTML to load them.

The short answer

For almost every website, this set covers all browsers and devices:

• favicon.ico with 16, 32 and 48 px inside, in your site root.
• apple-touch-icon.png at 180×180 px for iPhone and iPad home screens.
• icon-192.png and icon-512.png for Android and installed web apps, listed in a web manifest.

An SVG favicon is a nice extra for modern browsers, because it stays sharp at any size and can switch colors in dark mode.

Every size and where it is used

You can put more sizes in the ICO file without harm. Our converter adds nine, from 16 to 256 px, so the same file also works as a Windows icon.

What Google Search needs

Google shows your favicon next to your site in search results. Its rules are simple:

• The icon must be square and at least 8×8 px. Google recommends larger than 48×48 px.
• Declare it with a <link rel="icon"> tag on your home page.
• Googlebot must be able to crawl both your home page and the icon file, so do not block it in robots.txt.
• ICO, PNG, GIF, JPEG, BMP and a few other formats are accepted.

After a change, Google can take days or weeks to show the new icon. Requesting indexing of your home page in Search Console's URL Inspection tool can speed this up.

The HTML to add

Put these lines inside the <head> of every page:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<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 sizes="32x32" on the ICO line stops Chrome from picking the ICO over the SVG. Skip the SVG line if you don't have an SVG icon.

The manifest file lists the Android icons:

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

Step-by-step setup, including WordPress, is in how to add a favicon to your website.

Start from the right source image

Begin with a square PNG of at least 512×512 px with a transparent background. Every smaller size is then a clean downscale.

Simplify the design for the small sizes. Fine text and thin lines disappear at 16 px, so a single letter or symbol usually works better than a full logo.

Check the result at 16 px before you publish. If it turns into a blur, thicken the shapes or crop closer.