如何实现SVG favicon随页面刷新自动切换随机配色

完全可以实现，核心思路是动态生成带随机颜色的SVG内容，编码为Data URL后替换favicon的href属性即可，具体修改步骤如下：

步骤1：修正现有代码的变量错误 #

你当前代码里的randcol定义错误，不需要给随机下标加1，直接取数组对应下标的颜色值即可：

var rand = Math.floor(Math.random() * colors.length);
var randColor = colors[rand]; // 修正后取对应颜色值

步骤2：准备SVG内容 #

打开你本地的images/icon/icon.svg文件，复制全部SVG代码，替换到下方示例的svgStr变量中，把你需要动态修改的填充色/描边色的固定值替换为${randColor}占位符。
举个例子，如果你的原始SVG是以下内容（需要修改的填充色为#ff0000）：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path fill="#ff0000" d="M10 10h80v80H10z"/>
</svg>

替换后JS里的SVG字符串为：

const svgStr = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path fill="${randColor}" d="M10 10h80v80H10z"/>
</svg>`;

步骤3：生成动态favicon并赋值 #

把SVG字符串编码为Data URL，替换原有favicon的href属性：

const faviconHref = `data:image/svg+xml;utf8,${encodeURIComponent(svgStr)}`;
document.getElementById('favicon').setAttribute('href', faviconHref);

完整修改后的代码示例 #

<!DOCTYPE html>
<html lang="en" class="loaded">
<head>
  <link id="favicon" rel="shortcut icon" href="images/icon/icon.svg" sizes="any" type="image/svg+xml" >
<head>
.....
<script>
    $(document).ready(function () {
      // COLOR
      var colors = ["#00ffa2", "#660000", "#d70063", "#03e37f", "#a8a8c7", "#545435", "#413a97", "#c1c86b",
        "#c9f543", "#3207b8", "#ecdc29"
      ];
      var rand = Math.floor(Math.random() * colors.length);
      var randColor = colors[rand];
      // 替换为你自己的SVG内容
      const svgStr = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <path fill="${randColor}" d="M10 10h80v80H10z"/>
      </svg>`;
      const faviconHref = `data:image/svg+xml;utf8,${encodeURIComponent(svgStr)}`;
      document.getElementById('favicon').setAttribute('href', faviconHref);
    });
  </script>
</html>

注意事项 #

• 该方案兼容Chrome、Firefox、Safari 15及以上版本，覆盖绝大多数主流用户
• 如果你的SVG有多个位置需要改颜色，可按需求多设置几个占位符，对应替换即可
• 不需要额外发起SVG文件请求，性能损耗极低

内容的提问来源于stack exchange，提问作者Outdated DNZ