How to make a favicon in 2026

The favicon landscape has simplified

A decade ago, favicon guides listed a dozen file sizes: 16px, 32px, 48px, 64px, 96px, 120px, 128px, 152px, 167px, 180px, 192px, 512px — plus an ICO file containing multiple sizes. Browser vendors, Apple, Google, and Microsoft each had their own requirements, and getting it right meant generating a wall of <link> tags in your HTML head.

In 2026, you need four files to cover every modern browser and platform:

1. favicon.ico — 32×32 (or multi-size 16+32) for legacy browsers
2. icon.svg — scalable vector for modern browsers
3. apple-touch-icon.png — 180×180 for iOS home screen
4. icon-192.png and icon-512.png — for the web app manifest

That’s it. Here’s why each matters and what you can skip.

favicon.ico: still necessary, but barely

The ICO format dates to 1985 and Windows 1.0. It’s a container that can hold multiple bitmap images at different sizes. Modern browsers have supported PNG and SVG favicons for years, so ICO’s only remaining use case is legacy compatibility — specifically, older versions of Safari and some RSS readers that still look for /favicon.ico at the site root.

What to put in it: a single 32×32 image. You can include 16×16 as well if you want, but 32px downscales cleanly to 16px and most contexts that used to need 16px now render at 32px on high-DPI displays anyway.

The ICO format supports PNG-compressed images internally (since Windows Vista), so your ICO file can be tiny — under 5KB for a simple icon. There’s no need to use the old BMP encoding.

<!-- This is all you need in the HTML for ICO -->
<link rel="icon" href="/favicon.ico" sizes="32x32">

Most browsers also look for /favicon.ico at the root automatically, even without a <link> tag. But including the tag explicitly prevents the 404 request if you serve your favicon from a different path.

SVG favicon: the modern default

SVG favicons are the ideal format for modern browsers. They scale to any size without pixelation, they’re typically smaller than PNG, and they support CSS features — including dark mode.

<link rel="icon" href="/icon.svg" type="image/svg+xml">

Chrome, Firefox, Edge, and Safari (since 15.4) all support SVG favicons. When both an ICO and SVG are present, modern browsers prefer the SVG.

Dark-mode favicons with SVG

The killer feature of SVG favicons is dark mode support via CSS prefers-color-scheme:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    rect { fill: #6366f1; }
    @media (prefers-color-scheme: dark) {
      rect { fill: #818cf8; }
    }
  </style>
  <rect width="32" height="32" rx="6" />
  <text x="16" y="22" text-anchor="middle"
        fill="white" font-size="20"
        font-family="system-ui">D</text>
</svg>

This SVG shows a darker indigo background on light mode and a lighter one on dark mode. The icon adapts automatically when the user toggles their system theme — no JavaScript, no additional files. This is something you simply cannot do with PNG or ICO favicons.

For complex icons, you can use prefers-color-scheme to swap stroke colors, adjust opacity, or change fills on individual paths. The SVG <style> block supports any CSS that’s valid in SVG.

Apple touch icon: still a PNG, still 180px

When an iOS user adds your site to their home screen, Safari uses the Apple touch icon as the app-like launcher icon. The required size has been 180×180 since the iPhone 6 Plus in 2014 and hasn’t changed since.

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

iOS does not support SVG for touch icons — it must be a PNG. iOS also applies its own rounded-corner mask and sometimes a subtle gloss effect, so your source image should be a square with no transparency and no pre-applied rounding. Leave the corners square; iOS will round them to match the device’s corner radius.

You don’t need the older apple-touch-icon-precomposed variant. The -precomposed suffix disabled the gloss effect that Apple stopped applying years ago. Just use apple-touch-icon.

The web app manifest: 192px and 512px

If your site has a manifest.json (or site.webmanifest), you need icon entries for Android home screen and PWA install prompts. The required sizes are 192×192 and 512×512:

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

Android uses the 192px icon for the home screen and the 512px icon for the splash screen during app launch. Chrome also uses these icons for the “Install app” prompt.

The 512px version doubles as your highest-resolution master — you can downscale it to generate every other size. Start with a crisp 512×512 source and everything else derives from it.

You can also specify a maskable icon for Android’s adaptive icon system. Maskable icons have a “safe area” (the inner 80% circle) that’s guaranteed to be visible regardless of the device’s mask shape. If you provide one, add "purpose": "maskable" to the manifest entry and ensure important content stays in the center 80%.

What you can skip

Microsoft tile images (msapplication-TileImage, browserconfig.xml): Windows no longer uses these for pinned sites. Edge uses the standard favicon and manifest icons.

Multiple PNG sizes in HTML: You don’t need <link rel="icon" sizes="16x16">, sizes="32x32", sizes="96x96", etc. in your HTML. The SVG handles all of these at infinite resolution. The manifest handles 192 and 512. The ICO handles the 32px legacy case.

Safari pinned-tab SVG (mask-icon): This was a monochrome SVG required for Safari’s pinned tabs in macOS. Safari now uses the standard favicon for pinned tabs, so mask-icon is no longer needed.

The complete HTML

Here’s the minimal HTML you need in your <head>:

<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.json">

Four lines. Four files (plus the two manifest PNGs). That’s the entire favicon setup for a production website in 2026.

Generating the files

If you don’t already have icon assets, the Favicon Generator can create all the sizes you need. Upload an existing image to resize it to 16, 32, 192, and 512px PNGs, or create a letter-based icon with custom colors. It runs entirely in the browser using the Canvas API — your images never leave your device.

For the SVG version, you have two options: hand-write a simple SVG (most favicons are simple enough for this), or convert a raster design in a vector editor like Figma or Inkscape. The SVG doesn’t need to be pixel-perfect at 16px since browsers render it at whatever resolution the display needs.