笔记-如何创建动态变化的图标

[kuikuiGe]

主要代码

const faviconHref = emoji =>
  `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22256%22 height=%22256%22 viewBox=%220 0 100 100%22><text x=%2250%%22 y=%2250%%22 dominant-baseline=%22central%22 text-anchor=%22middle%22 font-size=%2280%22>${emoji}</text></svg>`
  
const changeFavicon = emoji => {
  if (typeof window === 'undefined') return

  const link =
    window.document.querySelector("link[rel*='icon']") ||
    window.document.createElement("link")
  link.type = "image/svg+xml"
  link.rel = "shortcut icon"
  link.href = faviconHref(emoji)

  window.document.getElementsByTagName("head")[0].appendChild(link)
}

changeFavicon('🎅')

关键网址

Free Favicon Maker

Free Favicon Maker是免费的图标生成网站，支持单词、表情输入。可以创建自己的图标。关键代码如下：

// https://formito.com/tools/favicon
const faviconHref = emoji =>
  `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22256%22 height=%22256%22 viewBox=%220 0 100 100%22><text x=%2250%%22 y=%2250%%22 dominant-baseline=%22central%22 text-anchor=%22middle%22 font-size=%2280%22>${emoji}</text></svg>`

emojipedia

emojipedia.org是表情符号搜索引擎。可以领略各种版本的表情，支持表情搜索、复制表情。

谷歌工单网址

bugs.chromium.org

原文链接

how-to-create-a-favicon-that-changes-automatically