Dynamic Favicon

On pages with a clear status, like a GitHub Pull Request or an Actions workflow, the favicon in the browser tab updates to reflect the current state. A pending check becomes a green checkmark for success, a red X for failure, or a purple icon for a merged PR. This turns a static brand mark into a dynamic, at-a-glance status indicator.

Why It Works

This detail masters the art of ambient information. In a world of tab overload, users rarely look at one page at a time. They have dozens of tabs open, and context-switching is constant.

By embedding status directly into the favicon, GitHub extends its UI into the browser's chrome. It provides critical information without requiring the user to click on the tab. This reduces cognitive load and saves time—you can instantly identify the status of a build or PR just by scanning your tabs, not by reading their titles. It's an act of deep respect for the user's focus and cluttered digital workspace.

When to Bring This to Your Product

• For long-running processes: Use it on pages that monitor tasks like data exports, file uploads, or CI/CD pipelines. The favicon can communicate "In Progress," "Complete," or "Failed."
• For pages with distinct states: Ideal for items that move through a workflow, such as a support ticket ("Open," "Pending," "Closed") or a document ("Draft," "In Review," "Published").
• When users have multiple instances open: If users frequently open multiple documents or projects, a dynamic favicon helps them differentiate tabs without clicking through each one.

Where You've Seen It

• GitHub: Shows the status of Pull Requests and Actions workflows.
• Netlify: Indicates the build status of a deploy (Building, Published, Failed).
• Gmail: Displays the number of unread emails.
• Google Meet: Shows a red dot when a meeting is being recorded.

How to Recreate It

function updateFavicon(status) {
  const favicon = document.getElementById('favicon');
  
  const icons = {
    success: 'favicon-success.png',
    error: 'favicon-error.png',
    default: 'favicon-default.png'
  };
 
  // Set the href to the new icon path, or back to default
  favicon.href = icons[status] || icons.default;
}