使用 js 添加/更改网站图标

Question

我正在制作一个书签，它将打开一个菜单，您可以在其中更改网站图标和标题，并进行预设。 我可以更改标题，但我不知道如何添加图标。 我试图这样做而不必找到网站图标，但添加一个图标元素。 我尝试了以下方法：

javascript:$('head').append('<link rel="shortcut icon" type="image/png" href='https://ssl.gstatic.com/docs/doclist/images/infinite_arrow_favicon_5.ico"/>');

这将是一些代码，据说可以将 favicon 更改为 google drive 符号，但它对我不起作用。 我如何在不知道特定元素 class 或 id 的情况下将网站图标注入网站，而是通过插入一个全新的元素。

Answer 1

试试这个代码：

var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
link.type = 'image/png';
link.rel = 'shortcut icon';
link.href = 'https://ssl.gstatic.com/docs/doclist/images/infinite_arrow_favicon_5.ico';
document.getElementsByTagName('head')[0].appendChild(link);

Answer 2

jQuery 版本：

$("link[rel='shortcut icon']").attr("href", "favicon.ico");

甚至更好：

$("link[rel*='icon']").attr("href", "favicon.ico");

香草 JS 版本：

document.querySelector("link[rel='shortcut icon']").href = "favicon.ico";

document.querySelector("link[rel*='icon']").href = "favicon.ico";

Answer 3

你可以试试faviconjs ，它支持图像更改、动画和通知。 它的主页可让您快速查看该库是否对您有用。