更改网站图标

以下方法将图标更改为 URL：

const setFavicon = (url) => {
  // 找到当前的图标元素
  const favicon = document.querySelector('link[rel="icon"]')
  if (favicon) {
    // 更新新链接
    favicon.href = url
  } else {
    // 创建新的 link
    const link = document.createElement('link')
    link.rel = 'icon'
    link.href = url
 
    // 附加到 head 元素
    document.head.appendChild(link)
  }
}

当想动态更新图标时，例如，更新到社交网站中的用户图标时：

setFavicon('/path/to/user/profile/icon.ico')

使用表情符号作为收藏夹

请注意，setFavicon()方法接受 favicon 的 URL。我们可以通过传递自定义 URL 来做一些很酷的事情。

在下面的代码中，我们创建了一个 canvas 元素，用特定的表情符号填充它并获取自定义 URL：

const emojiFavicon = (emoji) => {
  // 创建画布元素
  const canvas = document.createElement('canvas')
  canvas.height = 64
  canvas.width = 64
 
  // 获取画布上下文
  const context = canvas.getContext('2d')
  context.font = '64px serif'
  context.fillText(emoji, 0, 64)
 
  // 获取自定义网址
  const url = canvas.toDataURL()
 
  // 更新图标
  setFavicon(url)
}
 
emojiFavicon('🎉')