Runnable HTML Docs: Favicon

Q: How do I add a favicon in HTML?

Put the icon file on your site and add (or a PNG or SVG path) inside . Browsers then show it in the tab, in bookmarks and in the history list.

Q: What size should a favicon be?

Ship a 32×32 favicon.ico (or PNG) for tabs, an SVG that scales to any size, and a 180×180 PNG apple-touch-icon for iPhone home screens. Web apps with a manifest also list 192×192 and 512×512 PNGs.

Q: Why is my favicon not showing?

The usual causes are a wrong path in href, the sitting outside , or the browser still showing a cached old icon. Open the icon URL directly to check the path, then reload with the cache cleared or add a version such as ?v=2 to the URL.

Q: Can I use an SVG or PNG as a favicon?

Yes. Use or . SVG works in Chrome, Edge and Firefox; keep an ICO or PNG as well for browsers that do not support it.

Q: Do I need rel="shortcut icon"?

No. rel="icon" is the standard value. The word shortcut is a leftover from old Internet Explorer and does nothing in current browsers.

How to add a favicon

Save your icon on the site and point to it from a <link rel="icon"> tag in <head>:

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

That is the whole answer for a basic site. The href can point to an .ico, .png or .svg file. The example below uses an SVG written straight into the href as a data URI, so it needs no separate file. A preview inside another page cannot change your browser tab, so the script draws the same icon in a mock tab and at three sizes:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bake Club</title>
  <link rel="icon" type="image/svg+xml"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%232563eb'/%3E%3Ctext x='16' y='23' font-size='20' font-family='Arial' font-weight='700' fill='white' text-anchor='middle'%3EB%3C/text%3E%3C/svg%3E">
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .bar { background: #e5e7eb; padding: 8px 8px 0; border-radius: 8px 8px 0 0; }
    .tab { display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: 8px 8px 0 0; padding: 8px 14px; font-size: 13px; }
    .sizes { display: flex; align-items: end; gap: 16px; margin-top: 16px; font-size: 12px; color: #6b7280; }
    .sizes div { text-align: center; }
  </style>
</head>
<body>
  <div class="bar"><div class="tab"><img id="tab-icon" width="16" height="16" alt=""><span id="tab-title"></span></div></div>
  <div class="sizes" id="sizes"></div>
  <script>
    const href = document.querySelector('link[rel="icon"]').href;
    document.getElementById('tab-icon').src = href;
    document.getElementById('tab-title').textContent = document.title;
    for (const size of [16, 32, 64]) {
      const box = document.createElement('div');
      box.innerHTML = '<img width="' + size + '" height="' + size + '" alt=""><br>' + size + 'px';
      box.querySelector('img').src = href;
      document.getElementById('sizes').append(box);
    }
  </script>
</body>
</html>

At 16 pixels there is room for one bold letter or a simple shape, and fine detail disappears. Design the icon for the smallest size first. Change fill='%232563eb' to another color (%23 is the URL-encoded #) and every copy updates.

Which files to ship

Browsers, phones and app launchers look for different icons. A small set covers all of them:

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

File	Size	Used for
`favicon.ico`	32×32	Browser tabs, and tools that only look for `/favicon.ico`
`icon.svg`	Any (vector)	Sharp tabs at every screen density, in Chrome, Edge and Firefox
`apple-touch-icon.png`	180×180	The icon when someone adds your site to an iPhone or iPad home screen
Manifest icons	192×192 and 512×512 PNG	Android home screen and installed web apps

Most browsers also request /favicon.ico from the site root on their own when a page has no icon link, so placing a favicon.ico there is a useful default. The sizes attribute tells the browser which size each file is, so it can pick the best match. Use rel="icon"; the older rel="shortcut icon" works only because browsers ignore the extra word.

An emoji favicon

For a prototype or a personal page, an emoji makes a quick favicon. Put it inside an SVG <text> element:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Emoji favicon</title>
  <link rel="icon"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E%F0%9F%8D%AA%3C/text%3E%3C/svg%3E">
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>The icon at tab size and larger:</p>
  <img id="a" width="16" height="16" alt="">
  <img id="b" width="48" height="48" alt="">
  <script>
    const href = document.querySelector('link[rel="icon"]').href;
    document.getElementById('a').src = href;
    document.getElementById('b').src = href;
  </script>
</body>
</html>

%F0%9F%8D%AA is the cookie emoji, URL-encoded. The emoji is drawn by the operating system's emoji font, so it looks different on Windows, macOS and Android, and for a real product a designed icon is the better choice.

An icon that follows dark mode

An SVG favicon can carry its own CSS, including a prefers-color-scheme media query, so a dark icon can turn light when the browser uses a dark theme:

<!-- icon.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    circle { fill: #111827; }
    @media (prefers-color-scheme: dark) { circle { fill: #f9fafb; } }
  </style>
  <circle cx="16" cy="16" r="14"/>
</svg>

Changing the favicon with JavaScript

Sites use a changing favicon for a notification dot or a status color. Draw the new icon on a <canvas> and set the link's href to the canvas image:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dynamic favicon</title>
  <link rel="icon" id="icon" href="data:,">
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 6px 12px; margin-inline-end: 6px; }
    img { vertical-align: middle; margin-inline-start: 8px; }
  </style>
</head>
<body>
  <button id="on">New message</button>
  <button id="off">Clear</button>
  Current icon: <img id="preview" width="32" height="32" alt="">
  <script>
    function draw(withDot) {
      const canvas = document.createElement('canvas');
      canvas.width = canvas.height = 32;
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = '#2563eb';
      ctx.fillRect(2, 2, 28, 28);
      if (withDot) {
        ctx.fillStyle = '#dc2626';
        ctx.beginPath();
        ctx.arc(24, 8, 7, 0, Math.PI * 2);
        ctx.fill();
      }
      const url = canvas.toDataURL('image/png');
      document.getElementById('icon').href = url;
      document.getElementById('preview').src = url;
    }
    document.getElementById('on').onclick = () => draw(true);
    document.getElementById('off').onclick = () => draw(false);
    draw(false);
  </script>
</body>
</html>

On a real page in Chrome or Firefox, the tab icon changes each time href is set, the same moment the preview image changes here.

Common mistakes

A wrong path. href="favicon.ico" is relative to the current page, so it breaks on /blog/post. Use a root path: href="/favicon.ico".
Expecting an update to show at once. Browsers cache favicons hard. Reload with the cache cleared, or change the URL (/favicon.ico?v=2) when you replace the icon.
A detailed logo shrunk to 16 pixels. Simplify it: one letter or one shape with strong contrast.
Only an SVG. Keep an ICO or PNG too for browsers without SVG favicon support, and add the apple-touch-icon for iOS.
Putting the link in <body>. Keep it in <head> with the title tag and other metadata.

Frequently Asked Questions

How do I add a favicon in HTML?

Put the icon file on your site and add <link rel="icon" href="/favicon.ico"> (or a PNG or SVG path) inside <head>. Browsers then show it in the tab, in bookmarks and in the history list.

What size should a favicon be?

Ship a 32×32 favicon.ico (or PNG) for tabs, an SVG that scales to any size, and a 180×180 PNG apple-touch-icon for iPhone home screens. Web apps with a manifest also list 192×192 and 512×512 PNGs.

Why is my favicon not showing?

The usual causes are a wrong path in href, the <link> sitting outside <head>, or the browser still showing a cached old icon. Open the icon URL directly to check the path, then reload with the cache cleared or add a version such as ?v=2 to the URL.

Can I use an SVG or PNG as a favicon?

Yes. Use <link rel="icon" href="/icon.svg" type="image/svg+xml"> or <link rel="icon" href="/icon.png" type="image/png">. SVG works in Chrome, Edge and Firefox; keep an ICO or PNG as well for browsers that do not support it.

Do I need rel="shortcut icon"?

No. rel="icon" is the standard value. The word shortcut is a leftover from old Internet Explorer and does nothing in current browsers.

Can I use an emoji as a favicon?

Yes, by wrapping it in an SVG: an SVG data URI containing a <text> element with the emoji. It is handy for prototypes, but the emoji looks different on each operating system.

Related concepts