Favicons in 2026: standards, formats & best practices

sites in 2026 are still using favicon setups made for Internet Explorer. This guide tells you what to use what to drop and why the old multiformat approach just adds extra weight.

I. The evolution of favicons: from.ico to.svg

Favicons started as favicon.ico files at the root of a site. 16×16 Squares in browser tabs. Internet Explorer 5 made this happen in 1999. Other browsers copied it. It stayed that way for about 15 years.

The.ico era (1999–2015)

IE5 looked for favicon.ico on its own no <link> tag needed. Every other browser did it too. The format had some advantages back then:

• It worked with every browser, including Firefox and Chrome

• You could put sizes (16×16, 32×32 48×48) in one file

• It loaded without any HTML markup

Problems showed up over time. .Ico is a Windows format. Transparency didn't always work well. Files didn't compress well either. On Retina screens a 16×16 icon looked bad.

Opening up to formats (2015–today)

As IE lost ground and Chrome Firefox and Safari took over .png and then .svg became good options.

.png became popular fast. It has alpha transparency compresses better and works well with browsers.

.svg came later and more slowly. Chrome added support in version 80 (2020) Firefox from version 41. Safari support is still a bit uneven.. Where it works it's a good choice: one file, vector, tiny with dark mode support built in via prefers-color-scheme.

II. Which formats in 2026?

Why you probably don't need.ico anymore

.ico works. Browsers still look for /favicon.ico on their own.. Unless you have an old system that depends on it SVG and PNG cover every browser people actually use.

Keep .ico if you're using a CMS that generates it automatically or if you're supporting old company environments.

SVG: the right default

SVG scales without losing quality usually weighs less than a PNG and the CSS-based dark mode approach works well.

Chrome, Firefox, Edge and Android browsers all support it. Safari partially does. SVG shows in the browser tab but falls back to PNG for bookmarks and search.

PNG 96×96: the practical fallback

Google says favicons should be least 48×48. A 96×96 PNG is a choice. Browsers scale it down well and it looks good in search results.

Safari and iOS don't render SVG favicons so this PNG is doing work.

Google Search: A 96×96 PNG meets Googles requirements.. Showing in results isn't guaranteed, even when you follow the guidelines.

III. A lean 2026 setup

HTML

<!-- Favicon -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-96.png" sizes="96x96" type="image/png">

Two tags cover sites. The browser picks the SVG if it can falls back to PNG otherwise.

• rel="icon" declares the icon

• type="image/svg+xml" specifies the format. Needed for format-switching to work

• sizes="96x96" tells crawlers and size-aware browsers what they're dealing with

Browser compatibility

What to do and what to skip

Do:

• Use a SVG with good contrast. Icons get small fast

• Test on desktop, mobile and in Google results; they all render differently

• Use a background

Don't:

• Stack sizes (16×16, 32×32, etc.). You don't need them

• Use SVG with strokes or fine detail. It breaks down at small sizes

• Skip the type attribute in the <link> tag

• Include .ico without a reason

Dark mode favicons

SVG supports prefers-color-scheme on its own. You can handle mode inside the file:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    rect { fill: white; }
    @media (prefers-color-scheme: dark) { rect { fill: black; } }
  </style>
  <rect width="100" height="100"/>
  <!-- your icon -->
</svg>

Or declare a separate dark variant in HTML:

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-dark.svg" type="image/svg+xml"
media="(prefers-color-scheme: dark)">

IV. Whats

SVG + PNG 96×96 covers most sites. Add .ico or platform- variants when the project actually needs them. Not by default.

Next up: iOS home screen icons, Android icons and manifest.json, for PWAs. Touch icons, adaptive icons & manifest.json.