Favicon Sizes Guide: Which Icons Does Your Website Need?

A favicon is the tiny icon in your browser tab. It's easy to treat as an afterthought — until you notice your site showing a blank grey globe in someone's bookmarks, on their phone's home screen, or next to your name in Google search results.

The confusing part is that there isn't just one favicon any more. Different browsers and devices look for different files. Here's exactly what you need, and nothing you don't.

The short answer

For almost every website, this set covers everything:

That's six files. You can generate all of them from one logo in the free Favicon Generator.

What each one does

favicon.ico — the classic

The .ico format can hold several sizes inside a single file. Browsers, RSS readers and plenty of other tools still request /favicon.ico automatically — even if you never link to it — so leaving it out fills your server logs with 404 errors. Put it in the root of your site.

PNG favicons — sharp tabs

Modern browsers prefer PNG files declared in your HTML. A 32×32 icon looks crisp in tabs on high-resolution screens, and 16×16 is used in some smaller spots.

Apple touch icon — iOS home screens

When someone on an iPhone or iPad taps Share → Add to Home Screen, iOS uses your apple-touch-icon.png. At 180×180 pixels it looks great on current devices. iOS doesn't support transparency well here, so give it a solid background.

Android and PWA icons

Android uses the icons listed in your web app manifest (site.webmanifest). A 192×192 icon covers the home screen, and 512×512 is used for splash screens and when your site is installed as a Progressive Web App.

The HTML you need

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

<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">

And a minimal site.webmanifest:

{
  "name": "Your Site",
  "short_name": "Site",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

On WordPress, you can skip the code: go to Appearance → Customize → Site Identity and upload a 512×512 image as your Site Icon.

What about SVG favicons?

An SVG favicon scales perfectly to any size, and you can even include a CSS media query inside it so the icon changes in dark mode. Most modern desktop browsers support it:

<link rel="icon" href="/icon.svg" type="image/svg+xml">

Browser support isn't universal, though, so treat SVG as a bonus — always keep the ICO and PNG files as a fallback.

Getting your favicon into Google search results

Google shows your favicon next to your site name in search results, which makes your listing more recognisable. According to Google's guidelines, your favicon should:

• Be square, and at least 48×48 pixels (use multiples of 48, such as 96 or 144, for sharper results)
• Be linked from your homepage with a <link rel="icon"> tag
• Stay at a stable URL that Googlebot is allowed to crawl
• Be a visual representation of your brand, not something inappropriate

It can take a while for Google to pick up a new favicon after it next crawls your homepage.

Design tips for tiny icons

Your icon will often be shown at 16 pixels — about the size of this letter m. What looks great as a full logo can turn into a smudge.

• Simplify. Use your logo mark, not the full logo with the company name.
• Go bold. Thick shapes and strong contrast survive shrinking; thin lines don't.
• Skip the text. One letter can work. Whole words can't.
• Test on dark tabs. A black icon on a transparent background disappears in dark mode. Add a background colour or a little padding.

Troubleshooting: "my favicon won't update"

Browsers cache favicons stubbornly. If you've changed yours and still see the old one:

1. Open the site in a private/incognito window.
2. Visit yoursite.com/favicon.ico directly to check the file is really there.
3. Hard-refresh the page (Ctrl+F5, or Cmd+Shift+R on Mac).
4. Make sure your HTML points to the correct paths.

Make the whole set in one go

Upload your logo to the Favicon Generator, add some padding or a background colour if you need it, and download favicon.ico, every PNG size and the ready-made HTML and manifest code. It all runs in your browser, so your logo is never uploaded.

Need to prepare the source image first? The Image Resizer and Background Remover can help you get a clean, square logo to start from.