Favicon sizes guide 2026: the only files you need

Favicon advice online still lists twenty sizes, Windows tiles and files nobody reads any more. In 2026 a modern site needs four files and five lines of HTML. This guide lists exactly which sizes to make, why each one exists, and how to get your icon to show up next to your site in Google.

The favicon sizes you actually need

That is the whole list. Sizes like 57, 72, 114, 144 and the Windows 70, 150 and 310 tiles were for devices and browser versions that are long gone. Current iPhones scale the single 180px icon, and Android scales from 192 and 512.

The HTML to add

Put these lines in the <head> of every page, or once in your layout:

<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="/manifest.webmanifest">

And a small manifest file next to them:

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

Listing the ICO first with sizes="32x32" and the SVG second lets browsers that understand SVG pick it, while everything else falls back to the ICO.

Why each file matters

favicon.ico

Many tools, feed readers and crawlers still request /favicon.ico directly without reading your HTML. Keep one at the root of your site even if you use an SVG everywhere else. An ICO can hold several sizes in one file, so 16, 32 and 48px together is a good default.

SVG favicon

One small file that is crisp on every screen. It can even switch colors in dark mode with a media query inside the SVG. Keep the ICO as a fallback, because not every browser and tool reads SVG icons.

Apple touch icon

Use a solid background. iOS fills transparent areas with black, so a transparent logo can end up as a dark square on someone's home screen. Leave about 10% padding around the mark; iOS rounds the corners for you.

Manifest icons and maskable icons

Android crops icons into circles, squircles or rounded squares depending on the phone. A maskable icon keeps the important part inside the middle 80% of the image so nothing gets cut off. You can reuse the 512px PNG if your mark already has plenty of padding.

Getting your favicon into Google search results

Google shows a small icon next to your site name in results. To be eligible:

• The icon must be square. Google asks for larger than 48 x 48px, so a 512px PNG or an SVG is ideal.
• Declare it on your home page with rel="icon" (or apple-touch-icon).
• Do not block the home page or the icon file in robots.txt.
• Keep the favicon URL stable. Changing it often can delay updates.
• There is one favicon per domain or subdomain, not per folder.

Updates are not instant. It can take days to weeks for Google to recrawl your home page and pick up a new icon. Asking Search Console to reindex the home page can speed it up.

Common favicon mistakes

• A detailed logo squeezed to 16px. Use just the mark or one letter for the small sizes.
• Thin strokes. At 16px a 1px line disappears; bold, simple shapes read best.
• A transparent apple-touch-icon that turns black on iPhone.
• Forgetting /favicon.ico because the site uses SVG.
• Caching. Browsers hold favicons for a long time, so test in a private window after changing it.

Make every size in one click

Pick any of our free icons or upload your own logo in the favicon generator. It runs in your browser and gives you favicon.ico, the SVG, the Apple and Android PNGs and a ready manifest in one zip. If your logo is a PNG, trace it into a vector first with the PNG to SVG converter.