The Making of an Animated Favicon

This article demonstrates how to create an animated favicon using JavaScript, HTML <canvas></canvas>, and a bit of geometry. The favicon, that small icon displayed next to a website tab, can be dynamically updated to show loading progress. This is particularly useful when performing long tasks in the background, like uploading photos.

The key is to leverage the <canvas></canvas> element to draw the animation and then update the favicon with the rendered image. The article provides a step-by-step guide:

1. HTML Setup: Add a <canvas></canvas> element and a hidden <link> element for the favicon to your HTML. The <canvas></canvas> element will be used to draw the animation, and the <link> element will be updated to display the animation as the favicon. Both are sized 32x32 pixels, the standard favicon size. For demonstration purposes, a button is added to trigger the animation.

<link href="" rel="icon" type="image/png" width="32px">
<canvas height="32" hidden="" width="32"></canvas>
<button>Load</button>

2. JavaScript Animation: The JavaScript code first checks for canvas support. A button click event handler initiates the animation using setInterval to call the drawLoader function at 60ms intervals.

onload = () => {
  canvas = document.querySelector('canvas'),
  context = canvas.getContext('2d');
  if (!!context) {
      // Canvas supported
  }
};

button = document.querySelector('button');
button.addEventListener('click', function() {
    n = 0;
    loadingInterval = setInterval(drawLoader, 60);
});

3. Styling and Drawing: A linear gradient is defined for the animation's lines. The drawLoader function clears the canvas, then draws a portion of a square, incrementally increasing the drawn lines over four 25-interval phases. After each interval, the canvas content is converted to a PNG and set as the favicon.

let gradient = context.createLinearGradient(0, 0, 32, 32);
gradient.addColorStop(0, '#c7f0fe');
gradient.addColorStop(1, '#56d3c9');
context.strokeStyle = gradient;
context.lineWidth = 8;

function drawLoader() {
  with(context) {
    clearRect(0, 0, 32, 32);
    beginPath();
    // ... (Drawing logic - see original article for complete code) ...
  }
  // ... (Favicon update logic - see original article for complete code) ...
}

The complete drawing logic uses simple geometry to calculate the line endpoints for each phase of the animation. The article provides the mathematical formulas and corresponding code. The final step involves converting the canvas content to a data URL and updating the href attribute of the <link> element to display the animation as the favicon.

The full code is available on GitHub (links provided in the original article). The technique can be adapted to use different shapes and fill styles for varied animation effects.

The above is the detailed content of The Making of an Animated Favicon. For more information, please follow other related articles on the PHP Chinese website!