在 Favicon 中更改 SVG 的颜色

【问题标题】：Change color of a SVG in Favicon在 Favicon 中更改 SVG 的颜色
【发布时间】：2022-07-11 21:23:51
【问题描述】：

我想更改在 HTML 页面中用作 Favicon 的 SVG 的颜色。我想使用一个按钮，如果您单击该按钮，它应该会更改 Favicon。

我已经让它与我页面上的普通 SVG 元素一起工作，但我无法为 Favicon 工作。

有人知道如何做到这一点吗？

【问题讨论】：

我可能是错的，但 svg 使用内部样式和沙盒，因此无法从外部更改其样式，您需要修改 svg 文件本身。就个人而言，我为此使用 php

【解决方案1】：

<link id="favicon" rel="icon" href="image-name.svg" type="image/png" sizes="16x16">

创建两个图标并使用js函数替换。

<button class="btn2" type="button" onclick="changeFavicon()"> Change Favicon </button>


// Assign a constant variable and get them by the favicon Id
const favicon = document.getElementById("favicon");

// Creating a function for the button
function changeFavicon() {
    favicon.setAttribute("href", "image-name2.svg"); 
}

【讨论】：