🔗 Phase 3 · Links & Media🟢 BeginnerModule 04

HTML Favicons

⏱ 14 min read📖 4 sections🧩 5-question quiz

Course Progress40% complete

A favicon (short for "favourite icon") is the small icon shown in browser tabs, bookmarks, and history. It's often the first visual brand signal users see. Adding a proper favicon set — covering all devices and contexts — takes fewer than 10 lines of HTML and makes your site look professional.

Section 1

The Basic Favicon

A favicon is declared in the <head> using a <link> element with rel="icon". The browser shows it in the tab, bookmark bar, and other UI surfaces.

HTMLBasic favicon

<head>
  <!-- Minimum: one favicon -->
  <link rel="icon" href="/favicon.ico">

  <!-- Modern: specify type and multiple sizes -->
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

  <!-- SVG favicon: scales perfectly at any size (modern browsers) -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
</head>

💡

Put favicon.ico in your root directory

Browsers automatically request /favicon.ico from the domain root, even without a <link> tag. Always put a favicon.ico at your root so older browsers and RSS readers show an icon. The ICO format supports multiple sizes in one file.

Section 2

Favicon Sizes

Different devices and contexts request different icon sizes. Here are the most important ones to include:

16×16

Browser tab, address bar

32×32

Taskbar shortcut, bookmarks

180×180

Apple touch icon (iOS home screen)

192×192

Android home screen, PWA

HTMLComplete favicon set

<head>
  <!-- Classic ICO fallback (browsers request this automatically) -->
  <link rel="icon" href="/favicon.ico" sizes="48x48">

  <!-- SVG: scales perfectly, supports dark mode via CSS -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">

  <!-- PNG fallback for older browsers -->
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

  <!-- Apple touch icon: shown when user saves to iOS home screen -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

  <!-- Web app manifest for Android PWA icons -->
  <link rel="manifest" href="/site.webmanifest">
</head>

Section 3

SVG Favicons & Dark Mode

SVG favicons are the future — they scale perfectly to any resolution and can even adapt to dark mode using a @media (prefers-color-scheme) query inside the SVG itself.

SVGDark-mode-aware favicon.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    /* Light mode: dark icon */
    circle { fill: #ef4444; }
    /* Dark mode: lighter icon */
    @media (prefers-color-scheme: dark) {
      circle { fill: #f87171; }
    }
  </style>
  <circle cx="16" cy="16" r="14"/>
  <text x="16" y="21" text-anchor="middle"
    font-size="16" fill="white" font-family="sans-serif">B</text>
</svg>

Section 4

Web App Manifest

The site.webmanifest file (referenced by <link rel="manifest">) tells Android and PWA-capable browsers what icons to use when the user installs your site as a home screen app.

JSONsite.webmanifest

{
  "name": "BitWithBite",
  "short_name": "BWB",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ef4444",
  "background_color": "#05091a",
  "display": "standalone"
}

🛠️

Use a favicon generator

Tools like RealFaviconGenerator.net take your logo (SVG or high-res PNG) and output a complete favicon package — all sizes, ICO, manifest, and the HTML code to paste. This is the standard professional workflow.

🧩 Quick Check — Lesson 14

5 questions · instant feedback

1. Which HTML element is used to add a favicon?

2. Where should favicon.ico be placed for maximum browser compatibility?

3. Which rel value is used for the Apple iOS home screen icon?

4. What is a major advantage of SVG favicons over PNG/ICO?

5. What does the web app manifest (site.webmanifest) primarily control?

🏆

Quiz Complete!

Favicons done! Moving on to Tables.

🏆

Lesson 14 Challenge

Code exercise · 10 min

Add a complete favicon set to a practice HTML page.

In the <head> of any HTML page, add:

1. A <link rel="icon" href="/favicon.ico" sizes="48x48">
2. An SVG favicon: <link rel="icon" type="image/svg+xml" href="/favicon.svg">
3. PNG fallbacks at 32×32 and 16×16
4. An Apple touch icon at 180×180
5. A <link rel="manifest"> pointing to /site.webmanifest
6. Create a minimal site.webmanifest JSON file with name, theme_color, and at least one icon entry

Show hints

All favicon links go inside the <head> element
Favicon files don't have to actually exist for the HTML to be valid
The manifest file is just a JSON text file — create it with any text editor
Use RealFaviconGenerator.net in a real project to auto-generate everything

← Image Maps

Lesson 14 of 35

Tables Basics →