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