More HTML: How to Add Favicons to Your Website

Join the AI Workshop to learn more about AI and how it can be applied to web development. Next cohort February 1st, 2026

The AI-first Web Development BOOTCAMP cohort starts February 24th, 2026. 10 weeks of intensive training and hands-on projects.

A favicon is the small icon that appears in browser tabs, bookmarks, and other places representing your website.

Basic Favicon

The simplest approach - place a favicon.ico file in your root directory:

/favicon.ico

Most browsers will find it automatically.

Modern Favicon Setup

For better control and quality, explicitly link to your favicon:

<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">
</head>

Favicon Formats

ICO (Traditional)

Works everywhere but limited quality:

<link rel="icon" href="/favicon.ico">

PNG (Modern)

Better quality, widely supported:

<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">

SVG (Best)

Scalable and supports dark mode:

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

Apple Touch Icon

For iOS home screen bookmarks:

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

Dark Mode Favicons

SVG favicons can adapt to dark/light mode using embedded CSS:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    .icon {
      fill: #333;
    }
    @media (prefers-color-scheme: dark) {
      .icon {
        fill: #fff;
      }
    }
  </style>
  <circle class="icon" cx="50" cy="50" r="40"/>
</svg>

This changes the icon color based on the user’s system preference.

Complete Favicon Setup

A comprehensive setup for all devices:

<head>
  <!-- Standard favicon -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">

  <!-- SVG favicon (supports dark mode) -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">

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

  <!-- Android Chrome -->
  <link rel="manifest" href="/site.webmanifest">
</head>

Web Manifest

For Android devices, create a site.webmanifest file:

{
  "name": "My Website",
  "short_name": "MySite",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}
FileSizePurpose
favicon.ico32x32Browser tabs
favicon-16x16.png16x16Small displays
favicon-32x32.png32x32Standard displays
apple-touch-icon.png180x180iOS home screen
android-chrome-192x192.png192x192Android
android-chrome-512x512.png512x512Android splash

Favicon Generators

Tools to generate all needed sizes:

  • realfavicongenerator.net
  • favicon.io

These create all the files and HTML you need from a single image.

Testing

  1. Clear browser cache (Cmd/Ctrl + Shift + R)
  2. Check different browsers
  3. Test on mobile devices
  4. Verify dark mode (if using SVG)

Lessons in this unit:

0: Introduction
1: How to Use Semantic HTML Container Tags
2: How to Create Links and Navigation in HTML
3: How to Use Open Graph Meta Tags
4: ▶︎ How to Add Favicons to Your Website
5: Introduction to Web Accessibility