More HTML: How to Add Favicons to Your Website

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.

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

Basic Favicon

The simplest approach is to 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"
}

Recommended Sizes

File	Size	Purpose
favicon.ico	32x32	Browser tabs
favicon-16x16.png	16x16	Small displays
favicon-32x32.png	32x32	Standard displays
apple-touch-icon.png	180x180	iOS home screen
android-chrome-192x192.png	192x192	Android
android-chrome-512x512.png	512x512	Android 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

Clear browser cache (Cmd/Ctrl + Shift + R)
Check different browsers
Test on mobile devices
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