HTML · Quick Reference

Lesson 14 — Favicons Cheat Sheet

HTML

In one line: 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.

Key Ideas

1The 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.

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

3SVG 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.

4Web 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 ho...

Code Examples

<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 re...

<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/s...

<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; ...