Favicon sizes and formats: the minimal set that works everywhere

A favicon is the small icon that appears in browser tabs, bookmarks, history, phone home screens and next to your site in Google’s search results. It’s a tiny file, but it’s surprisingly easy to get wrong: blurry icons, the wrong icon on iPhones, or no icon in search results at all. Over the years, favicon “checklists” grew to dozens of files. In 2026, a handful is enough. Our favicon generator produces the full set and the HTML from one image.

The minimal set you need

That’s five files. Old sizes like 57, 72, 114, 144 and 152 px Apple icons, or Windows tile images (msapplication-*), are no longer needed for current devices.

The HTML

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

And the web app manifest:

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

The sizes="32x32" on the ICO link stops some browsers from choosing the ICO over the SVG.

Format by format

ICO

An ICO file is a container that can hold several PNG or bitmap images at different sizes. Browsers pick the most suitable one. Include 16×16 (tabs), 32×32 (high-DPI tabs, taskbar) and optionally 48×48. Place it at the site root, /favicon.ico, because many clients request that path automatically.

SVG

A single SVG icon stays sharp at any size and any screen density. It can also adapt to dark mode with a media query inside the SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #111; }
    @media (prefers-color-scheme: dark) { path { fill: #fff; } }
  </style>
  <path d="M4 4h24v24H4z"/>
</svg>

Keep SVG favicons simple: very detailed artwork becomes a smudge at 16 px.

Apple touch icon

iOS uses a 180×180 PNG when someone adds your site to the home screen. iOS adds its own rounded corners, so supply a square image with no transparency (transparent areas turn black) and keep important content away from the edges.

Manifest icons and maskable icons

Android and installable web apps (PWAs) read icons from the manifest. 192 and 512 are the key sizes. A maskable icon has extra padding (keep the logo inside the central 80% “safe zone”) so Android can crop it into circles, squircles or other shapes without cutting off your logo.

Favicons in Google Search

Google shows a favicon next to your site name in search results, particularly on mobile. Google Search Central’s requirements:

• Add a <link rel="icon"> (or shortcut icon, apple-touch-icon) tag to the home page.
• The favicon file and the home page must be crawlable by Googlebot (not blocked in robots.txt).
• The icon must be square (1:1 aspect ratio) and at least 8×8 px; Google strongly recommends at least 48×48 px so it looks good on high-resolution screens. An SVG is fine.
• The favicon URL should be stable; don’t change it frequently.
• It should represent your brand and must not be inappropriate (Google replaces offensive favicons with a default icon).

Google crawls favicons on its own schedule; changes can take days to weeks to appear. Requesting indexing of the home page in Search Console can speed things up. For crawlability, see our robots.txt guide.

Design tips

• Simplify. Use your logo mark or a single letter, not the full logo with text.
• Test at 16 px. If you can’t recognise it in a browser tab, simplify further.
• High contrast. Tabs can be light or dark; a coloured background square or an outline helps the icon stand out in both. See our colour contrast guide.
• Pixel-align small sizes so edges are crisp rather than blurry.
• Consistent branding across the favicon, Apple icon and social sharing images. For social previews, see our Open Graph guide.

Common problems and fixes

Checklist

• favicon.ico (16, 32, 48) at the root.
• icon.svg for modern browsers, optionally with dark-mode styling.
• 180×180 apple-touch-icon.png without transparency.
• 192 and 512 PNGs (plus a maskable version) in the manifest.
• Link tags in the <head> of every page, especially the home page.
• Square, at least 48×48, crawlable and stable for Google Search.