How to add a browser tab icon (favicon) for a website?

To add a browser tab icon (favicon) to your website, follow these detailed steps and examples:

1. Favicon Basics

Purpose: Small icon displayed in browser tabs, bookmarks, history, and search results.
Formats: .ico (traditional), .png, .svg (modern), .gif (animated).
Sizes: Multiple sizes recommended (16×16 to 180×180 pixels) for different devices.

2. Step-by-Step Implementation

Option 1: Basic `.ico` Favicon

Create a 32×32 or 64×64 pixel .ico file (e.g., favicon.ico).
Place it in your website’s root directory.
Add to HTML <head>:

   <link rel="icon" href="/favicon.ico" type="image/x-icon">

Option 2: Modern Multi-Resolution Setup

Generate icons in multiple sizes (use tools like realfavicongenerator.net).
Place icons in a folder (e.g., /assets/favicons/).
Add to HTML <head>:

   <!-- Basic .ico fallback -->
   <link rel="icon" href="/assets/favicons/favicon.ico">

   <!-- Main favicon for modern browsers -->
   <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png">

   <!-- Apple Touch Icon (for iOS) -->
   <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png">

   <!-- Android Chrome -->
   <link rel="manifest" href="/assets/favicons/site.webmanifest">

   <!-- Windows Metro tile -->
   <meta name="msapplication-TileColor" content="#ffffff">
   <meta name="msapplication-TileImage" content="/assets/favicons/mstile-150x150.png">

   <!-- Theme color (browser UI) -->
   <meta name="theme-color" content="#ffffff">

Option 3: SVG Favicon (Scalable & Lightweight)

Create an SVG file (e.g., favicon.svg).
Add to HTML <head>:

   <link rel="icon" href="/assets/favicons/favicon.svg" type="image/svg+xml">

3. Example Files & Structure

File Structure:

root/
├── index.html
├── assets/
│   └── favicons/
│       ├── favicon.ico
│       ├── favicon-16x16.png
│       ├── favicon-32x32.png
│       ├── apple-touch-icon.png
│       ├── favicon.svg
│       └── site.webmanifest

site.webmanifest (for PWA support):

{
  "name": "My Website",
  "icons": [
    {
      "src": "/assets/favicons/favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/assets/favicons/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

4. Key Recommendations

File Naming: Use consistent names (e.g., favicon-{size}.png).
Caching: Set long cache headers for favicon files.
Validation: Test using:

Google Favicon Tester
Browser DevTools > Network tab (check loading).

Fallbacks: Always include a root-level favicon.ico for legacy browsers.

5. Dynamic Favicons (Advanced)

Change favicon dynamically with JavaScript:

// Change favicon to "alert" icon
function setFavicon(iconPath) {
  const link = document.querySelector("link[rel*='icon']") || 
               document.createElement('link');
  link.rel = 'icon';
  link.href = iconPath;
  document.head.appendChild(link);
}

// Usage
setFavicon('/assets/favicons/alert-icon.png');

6. Troubleshooting

Not Showing?:
Clear browser cache or test in incognito mode.
Verify file path correctness (e.g., href="/correct-path/favicon.ico").
Ensure server serves files with correct MIME types:
- .ico → image/x-icon
- .png → image/png
- .svg → image/svg+xml
iOS Issues: Use 180×180 non-transparent PNG for Apple Touch Icon.

Tools & Resources

Generators:
realfavicongenerator.net,
favicon.io
Converters: Convert PNG to ICO at icoconverter.com
SVG Optimizers: SVGOMG

By following these practices, your favicon will work across all modern browsers, devices, and contexts (tabs, bookmarks, PWAs).