Favicon guide 2026: the sizes and files you actually need

Why the favicon matters more than it seems

The favicon is the smallest image on your site, yet one of the ones each user sees most often: in the browser tab, in bookmarks, in history, on the phone's home screen and, since 2019, next to your site in Google search results on mobile and desktop.

A clear, recognizable favicon helps users find your tab among fifteen others and builds trust in search results. A broken favicon (the default gray globe) conveys the opposite: a neglected or abandoned site.

The modern minimum set

The guidance has changed a lot in ten years. Today, this is the set recommended by the Chrome and Safari teams, and it covers virtually every case:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

And in the manifest:

{
  "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" }
  ]
}

That's it. You don't need mstile-150x150.png, browserconfig.xml, 12 apple-touch-icon sizes or safari-pinned-tab.svg (Safari has used the regular icon since version 12).

Each file, explained

favicon.ico

ICO is a container format that can hold several images of different sizes. Since Windows Vista, those images can be PNGs, which keeps the file small. The recommended sizes are 16, 32 and 48 px.

Although modern browsers prefer SVG or PNG, the ICO is still essential for a practical reason: lots of software (RSS readers, email clients, SEO tools, even Google in some cases) requests https://yourdomain.com/favicon.ico directly without reading your HTML. If it doesn't exist, you get 404s in your logs and a generic icon.

icon.svg

A vector favicon looks perfect at any screen density and usually weighs under 1 KB. It also allows something no PNG can do: adapting to dark mode with a media query inside the file itself:

<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="…"/>
</svg>

Chrome, Firefox and Edge support it; Safari falls back to the ICO or PNG.

apple-touch-icon.png (180 × 180)

This is the icon iOS uses when someone adds your site to the home screen, and the one Safari shows in some bookmark lists. Two important details:

No transparency. iOS fills transparent areas with black. Always give it a solid background.
iOS rounds the corners automatically. Deliver it square; if you round it yourself you'll get a double edge.

icon-192.png and icon-512.png

These are what the manifest needs for Chrome to consider your site installable as a PWA. The 192 one is used on the Android home screen and the 512 one on the splash screen and in web app stores.

icon-maskable-512.png

Each Android manufacturer uses a different icon shape: circle, squircle, rounded square, teardrop… A maskable icon is designed so the system can crop it to any of those shapes without cutting off the logo. The rule is that everything important must fit inside a circle with 80% of the icon's diameter, and the background must reach the edges.

If you don't provide a maskable icon, Android places your regular icon on a white circle, which usually looks small and unprofessional.

How to link them on your platform

Static HTML, Astro, Eleventy, Hugo: copy the files to the public folder and paste the five lines above into your template's <head>.

Next.js (App Router): put favicon.ico, icon.svg and apple-icon.png inside app/. Next.js detects those names and generates the tags automatically, with a hash in the URL to avoid caching problems. You can generate the manifest with app/manifest.ts.

WordPress: Appearance → Customize → Site Identity → Site Icon. Upload a 512 px PNG and WordPress generates 32, 180, 192 and 270 px sizes. It doesn't create an ICO or a maskable icon; if you want them, add them with a header plugin or in your theme.

Shopify: Online Store → Themes → Customize → Theme settings → Favicon. Shopify handles the small tab icon; for the rest you need to edit theme.liquid.

How to get Google to show your favicon

Google shows the favicon in search results when these conditions are met (according to its Search Central documentation):

It's linked with <link rel="icon"> on the domain's home page.
Both the home page and the favicon file are crawlable: not blocked in robots.txt and not behind a login.
It's square and its side is a multiple of 48 px (48, 96, 144…). An SVG is also valid.
It visually represents your brand and isn't inappropriate.

The change can take anywhere from a few days to several weeks. You can speed it up by requesting indexing of the home page in Search Console.

Common mistakes

The favicon doesn't update. Browsers cache it for days. Open /favicon.ico directly and hard-reload with Ctrl+F5, or change the URL by adding ?v=2.
Unreadable logo at 16 px. A logo with text doesn't work at that size. Use the symbol, the initial or a simplified version.
Invisible icon in dark mode. A black logo on a transparent background disappears in a dark tab bar. Use an adaptive SVG or add a background.
Huge PNGs. An icon-512.png exported from Figma or Photoshop can weigh over 100 KB. Optimize it losslessly; it usually drops to 15-40 KB.
Relative paths. Always use root-absolute paths (/favicon.ico), or icons will break on inner pages like /blog/post.

Generate everything in a minute

The ImageZap favicon generator creates exactly this set from your logo, with configurable background, padding and corners, optimizes it with OxiPNG and gives you the code for HTML and Next.js. All in your browser, with no uploads.