如何更改浏览器选项卡中的页面图标颜色

Question

Fontawesome 免费图标用作页面图标，例如

<html><head>
<link rel='icon' href='https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/svgs/solid/pen-to-square.svg'>
</head></html>

出现黑色图标的是 Chrome 选项卡：

如何更改此图标颜色？

还使用了Bootstrap 5。可以使用 bootstrap text-danger 类更改内部 html 页面颜色，例如

<i class="fa-regular fa-pen-to-square text-danger"></i>

或使用风格：

.fa-pen-to-square {
    color: red;
}

如何更改页面图标颜色？

这是使用 FontAwesome 免费 SVG 图标、Bootstrap 5、jquery 和 jquery ui 的 ASP.NET 9 MVC 应用程序。

更新

看起来像颜色属性

fill = "#AB7C94"

中所述注入到 SVG 中

并且内联数据 uri 应用于页面图标。

颜色被指定为 html 颜色名称。如何在 svg 中使用 html 颜色名称或将它们转换为 svg 中所需的颜色十六进制值？

或者 svg 过滤器可以应用于 FontAwesome 图标吗？不确定 FontAwesome 免费图标许可证是否允许图标修改。

Answer 1

不幸的是，无法使用 HTML 中应用的 CSS 类或样式动态更改 favicon 颜色，因为浏览器将 favicon 呈现为独立于 DOM 的独立图像资源。要更改用作网站图标的 FontAwesome 图标的颜色，您需要修改 SVG 文件本身。

大多数 CDN（包括 FontAwesome）以默认黑色或无颜色提供 SVG。他们不提供动态颜色定制。但是，您可以：搜索允许动态自定义 SVG 颜色的服务（尽管这些服务很少见且通常不是免费的）。 SVGOMG 或类似的 SVG 编辑器等工具可让您上传和编辑 SVG 文件。