让您的 Favicon 动起来

在 X 上看到了这个一个效果，让 favicon 图标动起来，觉得很酷

x favicon animated

测试代码

Javascript

        // 1. 拿到或者新建一个 favicon 的 link 元素
let link = document.querySelector('link[rel~="icon"]')
if (!link) {
  link = document.createElement('link')
  link.rel = 'icon'
  document.head.appendChild(link)
}

// 2. 在一个隐藏 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. 把 canvas 导出成 data URL，赋值给 favicon
  link.href = canvas.toDataURL('image/png')

  requestAnimationFrame(drawFrame)
}

requestAnimationFrame(drawFrame)

Fonnpo