// 1. Get or create a favicon link element
let link = document.querySelector('link[rel~="icon"]')
if (!link) {
  link = document.createElement('link')
  link.rel = 'icon'
  document.head.appendChild(link)
}

// 2. Draw one frame on a hidden canvas
const canvas = document.createElement('canvas')
canvas.width = 32
canvas.height = 32
const ctx = canvas.getContext('2d')

function drawFrame(t) {
  const scale = 0.5 + 0.5 * Math.abs(Math.sin(t / 400))
  ctx.clearRect(0, 0, 32, 32)
  ctx.fillStyle = '#ef4444'
  ctx.beginPath()
  ctx.arc(16, 16, 14 * scale, 0, Math.PI * 2)
  ctx.fill()

  // 3. Export canvas as a data URL and assign it to favicon
  link.href = canvas.toDataURL('image/png')

  requestAnimationFrame(drawFrame)
}

requestAnimationFrame(drawFrame)