animateFavicon.js

function animateFavicon () {
  const frameDelay = 10;
  const angleChange = .5;
  let angle = 0;
  let lastFrameTime = 0;

  const favicon = document.querySelector("[rel='icon']");
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const img = new Image();
  img.src = './svgs/favicon.svg';

  img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;

    const rotateFavicon = (currentTime) => {
      if (currentTime - lastFrameTime > frameDelay) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.save();
        ctx.translate(canvas.width / 2, canvas.height / 2);
        ctx.rotate((angle * Math.PI) / 180);
        ctx.drawImage(img, -img.width / 2, -img.height / 2);
        ctx.restore();

        favicon.setAttribute('href', canvas.toDataURL('image/png'));
        angle = (angle + angleChange) % 360;
        lastFrameTime = currentTime;
      }

      requestAnimationFrame(rotateFavicon);
    };

    requestAnimationFrame(rotateFavicon);
  };
}

animateFavicon();