/other
/Favicons

Favicons

比较全面的浏览器图标设置

<head>
  <meta charset="UTF-8" />
  <!-- 苹果移动端 safari 浏览器添加到主屏幕图标 -->
  <link
    rel="apple-touch-icon"
    sizes="180x180"
    href="/favicons/apple-touch-icon.png?v=1"
  />
  <link
    rel="icon"
    type="image/png"
    sizes="32x32"
    href="/favicons/favicon-32x32.png?v=1"
  />
  <link
    rel="icon"
    type="image/png"
    sizes="16x16"
    href="/favicons/favicon-16x16.png?v=1"
  />
  <!-- 安卓添加到桌面应用名称及图标设置 -->
  <link rel="manifest" href="/favicons/site.webmanifest?v=1" />
  <!-- 带 touchbar 的苹果笔记本，打开 safari 浏览器时，显示在 touchbar 区域的图标 -->
  <link
    rel="mask-icon"
    href="/favicons/safari-pinned-tab.svg?v=1"
    color="#5bbad5"
  />
  <!-- 常规浏览器标签页 -->
  <link rel="shortcut icon" href="/favicons/favicon.ico?v=1" />
  <!-- 苹果移动端 safari 浏览器添加到主屏幕标题 -->
  <meta name="apple-mobile-web-app-title" content="xxx" />
  <meta name="application-name" content="xxx" />
  <!-- msapplication：windows 系统固定在任务栏、开始菜单时显示的图标、标题设置 -->
  <meta name="msapplication-TileColor" content="#2b5797" />
  <meta
    name="msapplication-TileImage"
    content="/favicons/mstile-144x144.png?v=1"
  />
  <meta
    name="msapplication-config"
    content="/favicons/browserconfig.xml?v=1"
  />
</head>

动态添加览器标签页图标

// 设置浏览器标签页图标
function setFavicons() {
  const link = 'http://localhost:8010/favicons/android-chrome-192x192.png'
  const favicon = document.createElement('link')
  favicon.rel = 'icon'
  favicon.href = link
  document.head.appendChild(favicon)
  const applicationName = document.createElement('meta')
  applicationName.name = 'application-name'
  applicationName.content = 'xxx'
  document.head.appendChild(applicationName)
}