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 に1フレーム描画
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