Favicon HTML Code: Copy-Paste Tags for SVG, PNG & Apple

Ever pasted a single <link rel='icon'> tag into your <head> and called it a day? I did that for years, until I realized my site's icon looked like a blurry mess on iOS and completely disappeared in Android's app drawer. The browser ecosystem has fragmented heavily, and that one-liner just doesn't cut it anymore.

If you look at how GitHub or Stripe handle their headers, you will notice they don't just throw a single `.ico` file at the browser. They use a specific stack of tags to target different operating systems, dark mode preferences, and device resolutions.

We are going to skip the history lesson. You need favicon html code examples that actually work in 2026. Grab these snippets, drop them into your project, and move on to building actual features.

The Minimalist vs. The Realist Approach

You might be tempted to just drop a favicon.ico in your root directory and write zero HTML. Browsers will automatically look for it. But relying on this implicit behavior is a terrible idea. It gives you zero control over caching, breaks when you move your site to a sub-directory, and ignores modern high-DPI displays entirely.

Instead, we use a targeted approach. We serve a lightweight SVG to modern browsers, a legacy ICO to older ones, and specific PNGs for mobile operating systems.

Essential Favicon HTML Code Examples for 2026

1. The Modern Baseline (SVG + Fallback)

This is the absolute minimum you should be using today. SVG favicons are infinitely scalable and weigh practically nothing. We serve the SVG first, then provide an ICO fallback for browsers that haven't caught up.

<!-- Modern SVG Icon -->
<link rel='icon' href='/favicon.svg' type='image/svg+xml'>
<!-- Legacy ICO Fallback -->
<link rel='icon' href='/favicon.ico' sizes='any'>

Notice the sizes='any' attribute on the ICO file? That is a crucial hack. Without it, Chrome will sometimes choose the low-resolution ICO over your crisp SVG just because it thinks it knows better. Forcing sizes='any' fixes this bug.

2. The Apple Touch Icon (iOS & iPadOS)

Apple devices completely ignore standard favicon tags when a user saves your site to their home screen. They want a specific, high-resolution PNG. You don't need the dozen different sizes people used to recommend in 2015. A single 180x180 pixel image handles everything.

<!-- Apple Touch Icon for iOS -->
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>

Make sure this PNG has a solid background. iOS does not support transparency in home screen icons and will fill any transparent areas with an ugly black square.

3. The Android & PWA Manifest

Android devices and Progressive Web Apps (PWAs) look for a web manifest file to figure out how to display your app icon. Instead of linking multiple PNGs in your HTML, you link a single JSON file.

<!-- Web App Manifest for Android -->
<link rel='manifest' href='/site.webmanifest'>

Inside that site.webmanifest file, you will define your 192x192 and 512x512 icons. If you need help structuring that JSON, check out our website icon complete guide.

4. Dark Mode Support (The SVG Trick)

If your logo is black, it's going to vanish when a user switches their browser to dark mode. Because we are using an SVG for our primary icon, we can embed CSS media queries directly inside the image file itself. Your HTML doesn't change, but your SVG code looks like this:

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
  <style>
    path { fill: #000000; }
    @media (prefers-color-scheme: dark) {
      path { fill: #ffffff; }
    }
  </style>
  <path d='...' />
</svg>

The 'Copy-Paste This' Ultimate Snippet

Stop piecing things together. Here is the definitive, battle-tested stack for 2026. It covers 99% of use cases with just four lines of code.

<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'>
<link rel='manifest' href='/site.webmanifest'>

What about Windows Metro tiles? Safari pinned tab masks? Drop them. Microsoft deprecated tile icons years ago, and Apple finally adopted standard SVGs for Safari tabs. Less code means faster parsing.

Common Pitfalls (Why Your Code Isn't Working)

• Absolute vs. Relative Paths: If your site lives in a subfolder (like /blog/), relative paths (href='favicon.svg') will break. Always use root-relative paths (href='/favicon.svg') or absolute URLs.
• Aggressive Caching: Browsers cache favicons harder than almost any other asset. If you change your icon and don't see the update, you need to append a cache-buster query string like href='/favicon.svg?v=2'.
• Missing Files: Linking the HTML is only half the battle. If the server returns a 404 for these files, the browser gives up. Read our guide on why your favicon isn't showing to debug server-side issues.

Writing the HTML is easy, but generating perfectly sized, optimized image files is tedious. That is exactly why we built Mzu favicondl. Upload your high-res logo once, and we will generate the exact SVG, ICO, PNGs, and manifest file you need to make these code snippets work flawlessly.