Add a badge to the browser tab favicon using JavaScript

In this tutorial, we will look at how to add a badge to the current favicon in the tab using JavaScript.

Adding a badge to the favicon using JavaScript can be done by updating the image specified by the <link> element with a new icon image.

This method involves JavaScript and creating an in-memory canvas element, applying the favicon image, drawing the badge shape and text on top, and then updating the <link> element’s href attribute with the final composite of the canvas element’s image data as a Base64 encoded string.

Understanding what a favicon is

A favicon is a little icon that is used to represent a website. It is typically represented through the image in .ico, .png, .gif, .jpeg and .svg format and displayed with the page URL on browser tabs, bookmark bars, history, and search results. The term favicon is an abbreviation for favorite icon.

Use cases for the badge in the favicon

Possible use cases:

• Chat, email, and social apps, to indicate that new messages have come or to display the amount of unread items.
• To notify the user that a long-running task has been completed.
• Games, to indicate that a player action is necessary (for example, when it is the player’s turn in chess).

Adding a badge to your browser tab favicon with JavaScript

Let’s add a simple notification badge to the current favicon using JavaScript.

function addBadge(favicon) {
  const faviconSize = 32;
  const canvas = document.createElement('canvas');

  canvas.width = faviconSize;
  canvas.height = faviconSize;

  const context = canvas.getContext('2d');
  const img = document.createElement('img');

  const createBadge = () => {
      context.drawImage(img, 0, 0, faviconSize, faviconSize);

      context.beginPath();
      context.arc(canvas.width - faviconSize / 3 , faviconSize / 3, faviconSize / 3, 0, 2 * Math.PI);
      context.fillStyle = '#e30';
      context.fill();

      context.font = '15px Arial, sans-serif';
      context.textAlign = 'center';
      context.textBaseline = 'middle';
      context.fillStyle = '#fff';
      context.fillText(6, canvas.width - faviconSize / 3, faviconSize / 3);

      favicon.href = canvas.toDataURL('image/png');
   };

  img.addEventListener('load', createBadge);

  img.src = favicon.href;
}

document.querySelectorAll('link[rel="shortcut icon"], link[rel="icon"]').forEach(addBadge);

This code creates a canvas element and draws the favicon image and a red circle with the number 6 on it. Then it sets the favicon href to the data URL of the canvas. It applies the function to all link elements with rel attribute of shortcut icon or icon.

You can change the parameters of the badge, such as the number, font size, font family, badge background color, text align, and text baseline.

I can’t change the favicon with JavaScript in Safari

Safari browser intentionally prohibits the use of dynamic modifications or animations on the favicon. This means that you cannot use JavaScript or any other method to change or animate the favicon in Safari.

We (Apple) intentionally do not want the ability to script favicons.

This restriction is in place to maintain a consistent user experience and prevent potential abuse or misuse of the favicon feature. While other browsers may allow dynamic modifications or animations on the favicon, Safari has chosen to restrict this functionality.

Please note that this restriction specifically applies to the favicon, which is the small icon displayed in the browser tab. It does not necessarily apply to other dynamic modifications or animations on websites or web applications viewed in Safari.

Taking it to the next level with an enhanced version

Provided code is a very simple example, but it has some limitations. The badge does not adjust to the number of digits.

Let’s take our favicon game to the next level with our more advanced version. Let’s create a dynamic favicon that changes based on dynamic factors and set some requirements.

• The badge must automatically adjust its size to the number of digits.
• The badge is added using a link HTML element, but there might be a rel="shortcut icon" or rel="icon". We need to handle both.

• There might be more than one version of the favicon. We need to handle all versions.

  Example:
  <link rel="icon" href="https://www.sitelint.com/favicon.ico" type="image/x-icon" sizes="any">
  and
  <link rel="icon" href="https://www.sitelint.com/favicon.svg" type="image/svg+xml">.

• The above code will trigger an HTML request for a favicon every time a new badge is generated. Let’s then avoid that.
• Changing the color of the badge.
• Ability to remove a badge. This basically brings back the original favicon.

You can experiment with different parameters in example Add a badge to the browser tab favicon using JavaScript.