HTML/CSS 如何修改网站favicon（网站图标）的背景颜色

你给<link rel="icon">标签添加CSS样式的操作不会生效，原因是<link>属于页面元数据标签，仅用于告知浏览器相关资源的引用信息，本身不属于页面渲染的可见元素，其样式属性完全不会作用到浏览器标签栏、书签栏等位置展示的favicon图标上。

解决方案 #

方案1：直接修改源图标文件（兼容性最佳） #

这是最简单、全浏览器兼容的方案：

• 用PS、Figma或免费在线图片编辑工具打开你的favicon.png源文件
• 新增底层图层，填充你需要的颜色rgba(0, 56, 103, .94)
• 导出为PNG或ICO格式替换原有文件即可，无需修改HTML代码，原配置保留即可：

<head>
<link rel="icon" href="{% static 'images/favicon.png' %}">
</head>

方案2：用Canvas动态生成带背景的favicon（无需修改源文件） #

如果不方便修改原图标文件，可以通过JS在前端动态生成带指定背景的favicon：

// 动态生成带背景的favicon
const img = new Image();
img.crossOrigin = 'anonymous';
img.src = "{% static 'images/favicon.png' %}";
img.onload = function() {
  const canvas = document.createElement('canvas');
  canvas.width = 32;
  canvas.height = 32;
  const ctx = canvas.getContext('2d');
  // 先填充背景色
  ctx.fillStyle = 'rgba(0, 56, 103, .94)';
  ctx.fillRect(0, 0, 32, 32);
  // 再绘制原favicon图标
  ctx.drawImage(img, 0, 0, 32, 32);
  // 替换页面favicon
  const link = document.querySelector("link[rel*='icon']") || document.createElement('link');
  link.type = 'image/x-icon';
  link.rel = 'icon';
  link.href = canvas.toDataURL('image/x-icon');
  document.getElementsByTagName('head')[0].appendChild(link);
}

方案3：使用SVG格式favicon（现代浏览器适配） #

Chrome、Firefox、Edge等主流现代浏览器都支持SVG格式的favicon，你可以直接写一个带背景色的SVG文件作为favicon：

1. 新建favicon.svg文件，内容如下：

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
  <!-- 背景层 -->
  <rect width="32" height="32" fill="rgba(0, 56, 103, .94)" />
  <!-- 你的图标内容，可以是路径，也可以引入原有png -->
  <image href="images/favicon.png" width="32" height="32" />
</svg>

2. 修改HTML引用即可：

<link rel="icon" href="{% static 'images/favicon.svg' %}" type="image/svg+xml">
<!-- 可以保留原png配置作为旧浏览器降级方案 -->
<link rel="alternate icon" href="{% static 'images/favicon.png' %}" type="image/png">

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