Favicon sizes in 2026: the few files you actually need

The files and their sizes

Put favicon.ico at the root of your domain, so https://yourdomain.com/favicon.ico works. Browsers and many crawlers request that exact address even when your HTML points somewhere else.

The HTML to paste

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">      <!-- only if you have one -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#f2541b">

Order matters less than people think: browsers pick the best match from the list. The sizes on the ICO line stops Chrome from choosing the ICO over the SVG. theme-color tints the address bar on Android and the tab strip in some desktop browsers.

The web manifest

A small JSON file that tells Android and Chrome your app's name, colors and icons:

{
  "name": "Your Product",
  "short_name": "Product",
  "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" }
  ],
  "theme_color": "#f2541b",
  "background_color": "#ffffff",
  "display": "standalone"
}

Keep the maskable icon separate from the regular one. Android crops a maskable icon to its own shape, so the artwork needs padding: the important part has to fit in a circle whose diameter is 80% of the icon. A regular icon with the logo edge to edge gets its corners cut off.

Favicons in Google Search

Google shows your favicon next to your site name in mobile and desktop results, and a missing one looks like an unfinished site. Google's rules, in short:

• The favicon must be square and declared with <link rel="icon"> on your home page.
• Google accepts sizes from 8 × 8 but recommends larger than 48 × 48, so the 48 px layer in your ICO or the 192 px PNG are good picks.
• Both the home page and the icon file must be crawlable: not blocked in robots.txt.
• The icon has to represent your brand; Google replaces icons it considers inappropriate with a generic globe.
• Changes take time. Google re-crawls favicons on its own schedule, often days to weeks.

Designing for 16 pixels

At 16 × 16 a detailed logo turns into a smudge. What survives:

• One letter or one simple shape on a solid color square. That's why most big products use their initial.
• High contrast. Tabs can be light or dark, so a colored background square reads on both.
• A solid background on the apple-touch-icon. iOS fills transparent areas with black, which turns a transparent logo into a dark blob.
• Test at real size. Open the 16 px PNG at 100% zoom next to other tabs before you ship.

Sizes you can skip

Older generators still produce files nothing asks for anymore:

• 57, 60, 72, 76, 114, 120, 144 and 152 px Apple icons. iOS uses the 180 px icon and scales it down.
• mstile-*.png and browserconfig.xml. These were for pinned sites in old Windows versions.
• safari-pinned-tab.svg (mask-icon). Safari has shown regular favicons in tabs since version 12; the one-color mask icon is optional now.
• Android 36, 48, 72, 96 and 144 px icons. The 192 and 512 px manifest icons cover every density.

Questions

What size should a favicon be?

Make favicon.ico with 16, 32 and 48 px inside, a 180 × 180 apple-touch-icon, and 192 and 512 px PNGs for the web manifest. If your logo is a vector, add favicon.svg too.

Do I still need favicon.ico in 2026?

Yes. Browsers and many tools request /favicon.ico directly without reading your HTML, so keep one at the root of your domain even if you also use SVG or PNG favicons.

What size is the apple-touch-icon?

180 × 180 pixels, PNG, with a solid background. iOS scales that one file for every device, so the smaller Apple sizes are no longer needed.

What favicon size does Google need?

Google requires a square favicon declared on your home page and recommends one larger than 48 × 48 pixels. The icon file and the page must not be blocked by robots.txt.

Why isn't my new favicon showing?

Browsers cache favicons hard. Open the icon URL directly, hard-reload, or test in a private window. Google Search updates on its own crawl schedule, which can take days or weeks.

Can a favicon be an SVG?

Yes, in Chrome, Edge and Firefox, and an SVG can switch colors for dark mode with a media query inside the file. Keep favicon.ico and the PNG icons as well, because iOS and Android use PNGs.

Keep reading

• OG image size1200×630 works everywhere. What X, LinkedIn, Facebook, Slack and iMessage crop, and the tags to paste.
• Product Hunt imagesGallery 1270×760, thumbnail 240×240, and a five-image gallery plan that explains your product in one swipe.
• Link preview checkerFree tool: see your link on X, LinkedIn and Slack.