Favicons: Your Site's Little Face

Look at your browser tabs right now. Each one has a tiny picture next to its name. That picture is the site's favicon (short for "favourite icon"). It is only 16 pixels wide, but it does a big job: it lets people find your tab among twenty others, recognise your site in bookmarks and history, and trust that they are in the right place.

In this lesson you will learn which files you need, how to link them, and how to design an icon that still looks good when it is tiny.

What You Will Learn

• What a favicon is, and where it appears
• The modern set of icon files, and the link tags for them
• How to use an SVG icon, including a dark-mode version
• Apple touch icons and web app manifest icons
• Designing for 16 pixels
• Fixing caching problems and the "404 for favicon.ico" log noise

The Big Idea

HTML Code

index.html

<head>
  <meta charset="utf-8">
  <title>The Bread Bin</title>

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

Icon Designer

http://127.0.0.1:5500/index.html

Letter or two
Background
Letter colour
Shape
SquareRounded squareCircle

Drawing the icon…

Contrast between letter and background: 6.7 : 1. That is strong, and easy to read when small.

The tab icon has not been changed.

This really edits the icon link of this page while you are here, and restores it when you leave. Some browsers cache tab icons, so the change may be slow to show, or may not show at all in some browsers.

Design an icon, and press the button. Look at the tab of this very page. The icon really changes, and goes back when you press the restore button or leave the page.

Where Favicons Appear

Place	Who sees it
Browser tabs	Everyone, all day. The most important place
Bookmarks and favourites	Visitors who saved your page
History and address-bar suggestions	Visitors returning to your site
Tab search and tab-group lists	People with many tabs open
Search results	On some search engines, mostly on mobile
Phone home screens	Visitors who add your site to their home screen
Installed web apps	Visitors who install your site as an app

What Happens Without One

If you give no icon, browsers ask your server for /favicon.ico automatically. If the file is missing, they get a "not found" error. Your site then shows a blank or generic icon, and your server log fills with failed requests. So even a tiny site should provide an icon, or at least tell the browser not to ask.

The Modern Set of Files

There used to be a long list of sizes for every device. Today, a short set covers nearly everything:

File	Link tag	Purpose
favicon.ico (32 by 32)	<link rel="icon" href="/favicon.ico" sizes="32x32">	A fallback for older browsers, and anything that still looks for this file
icon.svg	<link rel="icon" href="/icon.svg" type="image/svg+xml">	Sharp at every size, tiny file, and can adapt to dark mode
apple-touch-icon.png (180 by 180)	<link rel="apple-touch-icon" href="/apple-touch-icon.png">	The icon for Apple home screens
icon-192.png and icon-512.png	listed inside the manifest	Icons for installed web apps and Android home screens

Why sizes on the ICO link? Some browsers choose between several icon links, and without a hint they may pick the ICO over your sharper SVG. Adding sizes="32x32" to the ICO (and, in some guides, sizes="any" to the SVG) helps them choose well. Browser behaviour here has changed over time, so test in the browsers you care about.

The Manifest

<link rel="manifest" href="/manifest.webmanifest">

manifest.webmanifest

{
  "name": "The Bread Bin",
  "short_name": "Bread Bin",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" },
    { "src": "/icon-maskable-512.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
  ],
  "theme_color": "#1d4ed8",
  "background_color": "#ffffff",
  "display": "standalone"
}

A maskable icon keeps its important part in the centre and fills the whole square, so a phone can crop it into a circle or rounded shape without cutting off your logo. Keep the main artwork inside the middle 80 percent or so.

An SVG Favicon That Adapts to Dark Mode

An SVG icon is a small piece of code, and it can contain a media query, so it can change colour when the browser is in dark mode:

icon.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #1d4ed8; }
    .letter { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #93c5fd; }
      .letter { fill: #0b1220; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="7"/>
  <text class="letter" x="16" y="23" font-size="22" font-weight="700" text-anchor="middle" font-family="sans-serif">B</text>
</svg>

Notes:

• The colour preference is the operating system or browser setting, not your page's own theme toggle.
• Not every browser supports SVG favicons, which is why the ICO fallback stays.
• For text in an SVG icon, remember it uses the viewer's fonts. For a logo, convert the shapes to paths.

Designing for 16 Pixels

Your icon will often be shown at 16 by 16 pixels: a postage stamp. Try the designer above, and look at the enlarged 16px version.

1. Keep it simple. One shape, one letter, or one bold symbol. No fine lines or small text.
2. Do not shrink a full logo. Make a simplified mark instead.
3. Use strong contrast between the symbol and its background.
4. Fill the space, with only a small margin.
5. Test on light and dark tabs. A dark icon with a transparent background can vanish on a dark theme.
6. Do not rely on colour alone. Some people cannot tell similar colours apart.
7. Make it recognisable next to your site name.
8. Start big (at least 512 by 512), then export the smaller sizes, and check each.

Caching: "I Changed It, But Nothing Happened"

Browsers keep favicons for a very long time, and sometimes in a separate cache from normal files. If your new icon does not appear:

1. Open the icon file's address directly in a tab, and reload that page.
2. Change the file name or add a version: href="/icon.svg?v=2".
3. Close and reopen the tab, and in stubborn cases the browser.
4. Remember search engines take days or weeks to refresh their copy.

Stopping the Favicon Request

For a quick prototype or a page you do not want an icon for, you can tell the browser to stop asking:

<link rel="icon" href="data:,">

That points to an empty inline resource. Browsers then do not request /favicon.ico. For a real website, provide a real icon.

Search Engine Icons

Some search engines show your icon next to your result. Their usual requirements, which can change, are:

• The icon is linked from your home page with <link rel="icon">.
• The file is at a stable address, and crawlers are allowed to fetch it.
• It is a square, with a size of at least 8 pixels (guidance often suggests a multiple of 48 pixels, such as 48 or 96).
• It does not show inappropriate content.

Check the current guidance from the search engines you care about. It may take a while for changes to appear.

In Docusaurus

Put your icon in the project's static folder, and set the favicon option in docusaurus.config.js, with a path relative to that folder (for example img/favicon.ico). For more icons, add link entries with the headTags option.

Good Habits

1. Always provide an icon, even for a small site.
2. Offer an SVG plus an ICO fallback, and an Apple touch icon.
3. Design for 16 pixels first.
4. Test on light and dark browser themes.
5. Keep the files small, and served over a stable address.
6. Add a manifest with a maskable icon if people may install your site.
7. Version the file name when you change the icon.
8. Keep the artwork simple and recognisable.

Accessibility Checklist

• The icon has strong contrast and a simple shape, so low-vision users can find the tab.
• It does not depend on colour alone to be recognised.
• It works on light and dark browser themes.
• It is never the only way to identify the site: the page also has a meaningful <title>.
• The icon does not flash or animate distractingly. Avoid changing it repeatedly with script.
• Alerts, such as an unread count in the icon, are also available as text (for example in the title).

Security and Privacy Notes

• Favicon requests reveal visits. If the icon is hosted by another company, they learn who loaded your page. Host it yourself.
• Do not point rel="icon" at an untrusted address. Treat it as any other file you load.
• Icons can be used to track people (a technique called favicon fingerprinting uses the browser's cache of icons across sites). You do not need to do anything about it as a site owner, but you should not use it for tracking.
• Changing the icon from script (for example to imitate another site, or to show a fake notification) is a technique used in fake pages. Do not use it to mislead people. Use it only to show real state, such as an unread count.
• SVG files can contain script. Browsers do not run script in an SVG used as an image icon, but you should still serve only SVGs you made or reviewed.
• Use https for every icon address.

Global Audience Notes

• Choose a symbol that works across cultures. A hand gesture, an animal, or a colour can mean different things in different places.
• Letters in an icon depend on a script. A Latin "B" means nothing to someone who reads Arabic or Devanagari. Consider a symbol, or use your brand's own letter in the local version.
• Keep the file small: an icon on a slow connection should not be heavy. SVG and a 32-pixel ICO are tiny.
• Many visitors use dark mode at night, in every region. Test both.
• Right-to-left sites can keep the same icon. Avoid icons that point left or right.

Common Mistakes to Avoid

1. No favicon, so the server log fills with errors.
2. Shrinking a detailed logo until it is a blur.
3. A transparent dark icon that disappears on dark tabs.
4. Only an ICO, with no SVG or touch icon.
5. A huge file such as a 2 MB PNG.
6. Forgetting the Apple touch icon.
7. A manifest with no 192 and 512 sizes.
8. Not testing after caching. You see the old icon and think it failed.
9. A relative path that breaks on nested pages. Start paths with /.
10. Hosting the icon on another company's server.
11. Using only colour to tell apart environments.
12. Rotating the icon with script to catch attention.

Practice Time

Try these in your editor:

1. Create a 32 by 32 icon in any image editor, and link it.
2. Make an SVG icon, and add a dark-mode colour set.
3. Use the designer above to try three shapes, and compare them at 16px.
4. Check the contrast of your icon's colours.
5. Add an Apple touch icon, and add the page to a phone's home screen.
6. Write a small manifest with a 192 and a 512 icon.
7. Change the icon, and use ?v=2 to get past the cache.
8. Open your icon in a dark browser theme and a light one.
9. Use the audit above to check which icon links a page declares.
10. Bonus: use developer tools to see the /favicon.ico request on a site that has no icon link.

Quick Recap

Click a question to check your answer.

1. What is a favicon?

The small icon shown beside a page's title in tabs, bookmarks, history, and sometimes search results and home screens.

2. Which files make a good modern set?

An SVG icon, an ICO fallback, an Apple touch icon of 180 by 180 pixels, and 192 and 512 pixel icons in a manifest.

3. What happens if you do not link an icon?

Browsers request /favicon.ico by themselves. If it is missing, the visitor sees a blank icon, and your server logs errors.

4. How can an SVG favicon support dark mode?

It can contain a CSS prefers-color-scheme: dark media query that changes its colours.

5. Why does my new icon not show?

Browsers cache icons for a long time. Reload the icon's own address, change its name or add a version query, and reopen the tab.

6. What is a maskable icon?

An icon that fills the whole square, with its important artwork in the centre, so a phone can crop it into any shape without cutting it off.

Key Takeaways

• A favicon is the small picture that helps people find and recognise your site.
• Use SVG + ICO + Apple touch icon + manifest icons, linked with <link> tags.
• Design for 16 pixels: simple shapes, strong contrast, tested on light and dark themes.
• An SVG icon can adapt to dark mode with prefers-color-scheme.
• Browsers cache icons heavily. Version the file name when you change it.
• Host the icon yourself, over https, and never use icon changes to mislead people.
• In Docusaurus, set favicon in the config and add more icons with headTags.

Next, style your page directly in the head with the Style element.