Favicon Sizes in 2026: Every Icon Your Website Needs

The favicon files you need

Here's the full set, what each file is for and where it shows up.

You can skip sizes from older guides, such as the dozen Apple icons at 57, 72, 114 and 152 px. Modern iOS scales the single 180 px icon down. The same goes for Windows tile images and browserconfig.xml, which today's browsers no longer need.

Why the ICO file holds three sizes

An ICO file is a small container with several PNG images inside. The browser picks the one closest to what it needs. A 16 px icon scaled up to 32 px looks blurry, and a 48 px one squeezed to 16 px loses detail. Including all three avoids both.

The Apple touch icon

iOS uses apple-touch-icon.png when someone adds your site to their home screen. It doesn't keep transparency and applies its own rounded corners. So give it a solid background and square corners. Our generator fills transparent areas with white for this file automatically.

Maskable icons and the safe zone

Android launchers crop icons into circles, squircles or rounded squares, depending on the phone. A normal icon can get its edges cut off. A maskable icon is designed for this: the background fills the whole square, and the logo sits in the middle.

The web manifest specification defines a safe zone. It's a circle in the centre with a diameter of 80% of the icon. Anything outside it may be cropped. On a 512 px icon, that's a circle about 410 px across.

In our favicon generator, Add a maskable icon is on by default. The Safe-zone padding slider runs from 10% (the minimum that still fits the circle) to 35% per side. The default of 22% keeps your logo inside the central 287 px of a 512 px icon, which leaves comfortable room.

The HTML to paste in your head

Upload the files to your site's root folder, then put these tags inside <head> on every page:

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<meta name="apple-mobile-web-app-title" content="My Site">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#1d4ed8">

And the manifest, saved as site.webmanifest in the same folder:

{
  "name": "My Website",
  "short_name": "My Site",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/maskable-icon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#1d4ed8",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "/"
}

If your icons live in a subfolder like /static/icons/, change every path to match. The generator has a field for this and rewrites the HTML and manifest for you. While you're editing <head>, our meta tag generator can produce the title, description and other tags in the same pass.

Note: Keep favicon.ico at the root of your domain even if you link it from somewhere else. Some browsers and many tools request /favicon.ico directly, without reading your HTML.

Next.js: the app folder way

Next.js App Router has file conventions for icons, so you don't write the <link> tags yourself. Drop files into the app folder and Next adds the right tags to every page:

app/
├─ favicon.ico           ← from the ZIP (root of app only)
├─ icon.png              ← rename favicon-96x96.png or android-chrome-512x512.png
├─ apple-icon.png        ← rename apple-touch-icon.png
└─ manifest.webmanifest  ← rename site.webmanifest
public/
└─ android-chrome-192x192.png, android-chrome-512x512.png, maskable-icon-512x512.png

A few things trip people up:

• favicon.ico only works in the root app folder, not in nested route folders.
• The manifest's icon paths point to files in public, so those PNGs go there.
• Delete any old favicon.ico from public and any hand-written <link rel="icon"> tags in your layout. Duplicates make it unclear which icon a browser will use.
• You can have several icons, such as icon1.png and icon2.png, or generate one in code with an icon.tsx file. For most sites, plain files are simpler.

The generator's Next.js code tab shows this layout so you can copy it.

How Google shows your favicon in search

Google Search shows your favicon next to your site name in results, especially on mobile. Its rules are short, and you can read them in full on Google's favicon guidelines. The key points:

• Square only. The favicon must have a 1:1 aspect ratio and be at least 8 × 8 px. Google recommends going larger than 48 × 48 px so it looks good everywhere. Older versions of the guidance asked for multiples of 48 px, so sizes like 96 or 192 px remain a safe choice.
• Link it from the home page. Use a <link> tag with rel="icon", shortcut icon, apple-touch-icon or apple-touch-icon-precomposed.
• One per site. Google uses one favicon per hostname. blog.example.com and example.com can have different icons, but two pages on the same hostname can't.
• Let it be crawled. Googlebot-Image must be able to fetch the icon, and Googlebot must be able to fetch the home page. Don't block either in robots.txt.
• Keep the URL stable. Don't keep changing the favicon's file name or path.
• Supported formats are BMP, GIF, ICO, PNG, JPEG, PPM and TIFF. SVG isn't on the list, which is another reason to keep PNG and ICO files even if you also use an SVG.

Google also asks that the icon visually represent your brand. It won't show a favicon it considers inappropriate, such as pornography or hate symbols, and uses a default icon instead.

After you change your favicon, Google needs to recrawl your home page. That can take anywhere from several days to several weeks. To speed things up, request indexing of your home page with the URL Inspection tool in Google Search Console.

Testing your favicon and beating the cache

Browsers cache favicons stubbornly. It's common to upload a new icon and still see the old one for days. Here's how to test properly:

1. Open each file directly. Visit yoursite.com/favicon.ico, /apple-touch-icon.png and /site.webmanifest in the browser. Each should load, not show a 404.
2. Check in a private window. It starts with an empty cache, so you see what new visitors see.
3. Use the browser's developer tools. In Chrome, open DevTools, go to Application and then Manifest. It lists your icons, flags missing ones and can preview the maskable icon's safe area.
4. Test on a real phone. Add the site to your home screen on iPhone and Android to see the Apple and maskable icons as they'll really appear.
5. Clear the old icon. Hard-refresh the page, or delete the browser's cached images. Safari keeps favicons in a separate cache and can take longest to update.

Tip: If you're replacing an icon on a live site, a one-time file name change (for example favicon-v2.png) forces browsers to fetch the new file. Update the HTML to match, then keep that new name stable, as Google asks.

While you're testing what people see before they visit, check your link previews too. Our Open Graph generator previews how your page looks when it's shared on Facebook, LinkedIn, WhatsApp or X, and gives you the tags to paste.

Design tips for a favicon that reads at 16 px

A favicon is often seen at 16 × 16 pixels, smaller than a letter on this page. Detailed logos turn into a blur.

• Use one simple shape or one or two letters. Your full logo with tagline won't survive. Many brands use just the first letter or the logo mark.
• Go bold. Thin strokes disappear at small sizes. In the generator's Text mode, the Bold or Black weight usually reads best.
• Use strong contrast. A white letter on a solid brand colour works well on both light and dark browser tabs.
• Leave a little padding. Content that touches the edges looks cramped in tab bars. The generator's Padding slider sets this for every size at once.
• Preview it small. The generator shows your icon in a browser tab and on a phone home screen, so you can judge it at real size before downloading.

You can start from your own logo (Image), a letter or two (Text) or an Emoji. Pick a shape (square, rounded or circle), then download the whole package.