Last week I was auditing a client's site and noticed they had six different favicon tags in their <head>, none of which actually worked in Safari. They had copied snippets from five different Stack Overflow answers, spanning 2014 to 2024. If you are looking for real favicon link rel icon examples, you need to see how production sites actually structure these tags—not just copy-paste fragmented advice.

I want to walk you through the exact HTML patterns that hold up in 2026 browsers. We will inspect what major companies actually ship, break down why they chose those specific rel attributes, and build a clean template you can use immediately.

What Real Production Sites Actually Ship

Let us look at GitHub. They serve millions of developers daily, and their favicon setup is battle-tested. If you inspect their source code, you will find a very deliberate pattern that prioritizes SVG for modern browsers while falling back to PNG for older ones.

GitHub's approach is simple: one SVG for modern browsers, one ICO for legacy support, and an Apple Touch Icon for iOS. They do not ship 15 different PNG sizes anymore. Stripe does something remarkably similar. Both companies treat the SVG as the primary source of truth.

The GitHub Pattern: SVG-First

GitHub uses a media query inside their SVG to handle dark mode automatically. This means a single file adapts to the user's OS theme without any JavaScript. Here is the exact pattern they use:

<link rel='icon' href='/favicon.svg' type='image/svg+xml'>
<link rel='icon' href='/favicon.ico' sizes='any'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>

Notice the order. The SVG comes first because modern browsers prioritize the first matching tag. The ICO acts as a fallback for older engines like Trident or early Edge. The sizes='any' attribute on the ICO tells the parser it contains multiple resolutions, preventing unnecessary DOM parsing.

The Stripe Pattern: Strict Separation

Stripe takes a slightly different route. They separate their dark mode SVG entirely using a second <link> tag with a media attribute. This is useful if your logo needs completely different artwork for dark backgrounds rather than just a color swap.

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

I prefer GitHub's approach because maintaining one file is easier than two. But if your brand guidelines demand distinct silhouettes for dark mode, Stripe's pattern is the way to go.

Step-by-Step: Building Your 2026 Favicon Stack

Stop guessing which tags you need. Here is the exact, ordered process to build a bulletproof favicon setup. We will focus on the minimal viable stack that covers 99% of devices.

Step 1: Prepare Your Files

You need exactly three files. Do not generate a massive folder of legacy PNGs unless you are building a PWA. Grab your original SVG and a high-resolution 512x512 PNG. Head over to Mzu favicondl to convert that PNG into a multi-resolution ICO and an Apple Touch Icon automatically.

Step 2: Write the HTML Tags

Place these tags as high in your <head> as possible, ideally right after the charset declaration. Browsers parse favicons eagerly, and placing them late can cause a flash of the default document icon.

<link rel='icon' href='/favicon.svg' type='image/svg+xml'>
<link rel='icon' href='/favicon.ico' sizes='any'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png' sizes='180x180'>

This three-line stack is all you need for standard websites. If you want to understand why we no longer use rel='shortcut icon', check out our deep dive on the link rel shortcut icon legacy issue.

Step 3: Verify with DevTools

Open Chrome DevTools and navigate to the Application tab. Look at the Manifest and Icons section. If your SVG is not listed there, you have a path issue. Always use absolute paths from the site root (starting with /) to prevent routing bugs in subdirectories.

Common Pitfalls When Copying Examples

Even with the right HTML, things break. Here are the three most frequent issues I see when developers copy favicon link rel icon examples from around the web.

1. Conflicting Type Attributes

If you declare type='image/png' on an ICO file, Safari will ignore it. Browsers trust the MIME type hint. If it is wrong, they silently drop the tag. Always ensure your type attribute matches the actual file format.

2. Wrong Tag Order

Some older browsers pick the last favicon tag they find. Modern browsers usually pick the first one they can render. If you put a 16x16 PNG before your SVG, Chrome might render the blurry PNG instead of the crisp vector. Always put your highest quality source first.

3. Missing Size Hints

If you serve multiple PNGs, you must declare the sizes attribute accurately. Browsers will not download every file to check dimensions. If you omit sizes, the browser guesses, and it usually guesses wrong.

For a complete breakdown of every resolution you might ever need, read our favicon sizes guide. But honestly, if you are shipping an SVG, you can ignore most of that list.

The Minimalist Approach Wins

You do not need a dozen HTML tags to have a professional favicon setup. The examples from GitHub and Stripe prove that a clean, SVG-first strategy works perfectly. Use three files, write three lines of HTML, and test your dark mode implementation. If your SVG is not switching colors when you toggle your OS theme, you need to add a CSS media query inside the SVG file itself. That is a topic for another day, but the HTML foundation you just built is solid.