Skip to content
toolsdocks

Favicons in 2026: which sizes and files you actually need

8 min read · Updated 4 October 2026

A favicon is the small icon that represents a website in browser tabs, bookmarks, history, search results and on phone home screens. Older guides list a dozen or more sizes, many of them for devices and browsers nobody uses any more. Today a handful of files cover practically every case.

This guide explains which files you need and why, how to reference them, and how to design an icon that still looks good when it is only 16 pixels across.

The short list

File Size Used by
favicon.ico contains 16, 32 and 48 px Browsers that look for it automatically, older software, many feed readers and tools
icon.svg scalable Modern browsers' tabs, at any size and screen density
apple-touch-icon.png 180 × 180 iPhone and iPad home screen and some bookmark views
icon-192.png 192 × 192 Android home screen, referenced in the web app manifest
icon-512.png 512 × 512 Splash screens and installable web apps, referenced in the manifest
manifest.webmanifest n/a Lists the icons and the app name for installable sites

That is it: one ICO, one SVG, three PNGs and a small manifest file. The favicon generator produces all of them from one source image, emoji or text, along with the HTML to paste into your page.

Why each file exists

favicon.ico. Browsers have requested /favicon.ico from the root of every site automatically since the late 1990s, even when no HTML references it. Many other programs do the same. An ICO file is a small container that can hold several images, so one file can include 16 × 16 (tab size on standard screens), 32 × 32 (high-density screens and taskbars) and 48 × 48. Keep it at the root of the site. Without it, server logs fill with 404 errors and some tools show a blank icon.

icon.svg. An SVG icon is a vector drawing, so it is sharp at any size and on any screen density, and it is often only a few hundred bytes. Most current browsers support SVG favicons; the ICO acts as a fallback for those that do not. An SVG favicon can also adapt to the browser's dark mode, which is covered below.

apple-touch-icon.png. When someone adds a site to the home screen on an iPhone or iPad, the system uses this image. 180 × 180 covers current devices; the system scales it down for smaller uses. iOS does not support transparency here in the way you might expect: transparent areas may be filled with a solid colour, so give this icon its own background. iOS also applies rounded corners itself, so supply a square image without pre-rounded corners.

Manifest icons (192 and 512). Android and installable web apps read icons from the web app manifest. The 192 px icon appears on home screens and the 512 px one on splash screens and in app listings.

The HTML

Place these lines 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">

The sizes="32x32" on the ICO line is a deliberate detail: it stops some browsers from choosing the ICO over the SVG when both are available.

A minimal manifest looks like this:

{
  "name": "Example Leather",
  "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": "#7a4b2a",
  "background_color": "#ffffff",
  "display": "standalone"
}

Maskable icons

Android launchers display icons in different shapes (circles, rounded squares, "squircles") depending on the device. A maskable icon is designed so that any of those shapes can be cut out of it without losing the important part.

The rule is a safe zone: keep the logo inside a central circle whose diameter is 80% of the icon's width, and fill the whole square with a background colour. For a 512 × 512 icon, the safe zone is a circle 409.6 pixels across (a radius of about 205 pixels) centred in the image. Anything outside it may be cropped.

Use a separate file for the maskable version, as in the manifest above. If you mark your normal icon as maskable, a logo that fills the square edge to edge will have its corners cut off.

Designing an icon that works at 16 pixels

A 16 × 16 icon has just 256 pixels. A full logo with a wordmark, a tagline and fine lines turns into a smudge at that size. Most recognisable favicons follow a few principles:

  • Use one simple shape: a single letter, a monogram, or the symbol part of your logo without the wordmark.
  • Fill the square. Leave only a small margin. A small mark floating in empty space looks even smaller in a tab.
  • Use bold strokes. Lines thinner than about 2 pixels at 16 px size tend to blur or vanish.
  • Choose strong contrast. Browser tab bars can be white, light grey, dark grey or black, depending on the theme. A dark icon on a transparent background disappears on a dark tab bar. Either give the icon a solid background shape (a rounded square or circle) or check it on both light and dark backgrounds.
  • Check it at real size. Zoomed-in previews are misleading. View the icon at 16 and 32 pixels before you commit.

Sometimes it is worth drawing a simplified version specifically for the smallest sizes rather than scaling down the large one. Pixel-level adjustments at 16 × 16 often make a noticeable difference.

Dark mode with an SVG favicon

Because an SVG favicon is a small document, it can contain a style block with a media query that reacts to the system's colour scheme:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    rect { fill: #7a4b2a; }
    @media (prefers-color-scheme: dark) {
      rect { fill: #e8b98f; }
    }
  </style>
  <rect x="2" y="2" width="28" height="28" rx="6"/>
</svg>

Browsers that support this switch the icon colour automatically. Keep the SVG small and simple: the SVG editor previews the markup live and can optimize it, removing editor metadata that drawing programs often leave behind.

Favicons in search results

Search engines show a site's favicon next to its results, especially on mobile. To make sure yours is used:

  • The icon should be square (a 1:1 aspect ratio). Google, for example, asks for at least 8 × 8 pixels but recommends larger than 48 × 48, so the ICO's 48 px size or the SVG both qualify.
  • The favicon and the home page must be crawlable: not blocked by robots.txt and not behind a login.
  • Use a stable URL. Changing the favicon file name frequently makes it harder for search engines to keep up.
  • The icon should represent your brand and must not be inappropriate; otherwise, a generic icon is shown instead.

Updates to the favicon in search results can take a while to appear, because they depend on the home page being recrawled.

What you can leave out

Many old generators still output files that serve no purpose today:

  • Apple icons in many sizes (57, 60, 72, 76, 114, 120, 144, 152 px). A single 180 × 180 icon is scaled down as needed.
  • browserconfig.xml and msapplication tiles for pinned sites on old versions of Windows.
  • mask-icon for Safari's old pinned tabs feature.
  • Dozens of PNGs such as 96 × 96, 128 × 128 or 196 × 196 linked with rel="icon". Browsers pick from the ICO or SVG.

Removing them does no harm and makes the <head> of every page shorter.

Step by step

  1. Start from the best source you have: an SVG of your logo symbol, or a square PNG of at least 512 × 512. If you only have a JPEG or another format, the image converter can convert it to PNG first; if it is not square, crop or pad it with the image resizer.
  2. Simplify the design for small sizes as described above.
  3. Generate the set with the favicon generator: the multi-size ICO, SVG, Apple touch icon, the manifest PNGs and the manifest itself.
  4. Upload the files to the root of your site (or adjust the paths in the HTML).
  5. Add the HTML lines to your page template so they appear on every page.
  6. Test: open the site in a few browsers, add it to a phone's home screen, and check the icon on a dark browser theme.

Why your new favicon does not show up

Browsers cache favicons aggressively and separately from the rest of the page, sometimes for a long time. If you replaced the icon and still see the old one:

  • Open the favicon URL directly (for example /favicon.ico) and refresh it there.
  • Try a private browsing window or another browser.
  • Add a version to the URL in your HTML, such as /icon.svg?v=2, so browsers treat it as a new file.
  • Check the server's response: the files should return 200 with the correct content type (image/x-icon or image/vnd.microsoft.icon for ICO, image/svg+xml for SVG, image/png for PNG).

Common mistakes

  • A PNG renamed to .ico. Some browsers accept it, others do not. Generate a real ICO file.
  • Only one large PNG, which browsers scale down poorly to 16 pixels.
  • A wide logo squeezed into a square, making it tiny or distorted.
  • Transparent Apple touch icon, which can end up on a black or otherwise unexpected background.
  • Missing manifest icons, so an installed web app shows a screenshot or a generic letter instead of your icon.
  • Paths that only work on the home page, such as href="favicon.ico" without the leading slash, which breaks on pages inside subfolders.

FAQ

Is favicon.ico still necessary if I have an SVG? Yes, keep it. Some browsers and many other programs still request /favicon.ico directly, and it is the fallback for anything that does not support SVG icons.

Can I use an emoji as a favicon? Yes. An SVG containing a text element with the emoji works in many browsers, but emoji look different on each operating system. Rendering the emoji to PNG and ICO gives a consistent result everywhere.

What colour should theme_color be? Your main brand colour. Some mobile browsers use it to tint the address bar, and it is used when a site is installed as an app.

Do I need different favicons for each page? No. One set for the whole site is normal. Some web apps change the favicon dynamically, for example to show a notification badge, but that is optional.