2021年在Chrome上测试提出的解决方案时，我发现浏览器有时会缓存favicon，即使链接发生了变化，也不会显示更改

这段代码可以工作(类似于前面的建议，但添加了一个随机参数以避免缓存)

let oldFavicon = document.getElementById('favicon')
var link = document.createElement('link')
link.id = 'favicon';
link.type = 'image/x-icon'
link.rel = 'icon';
link.href = new_favicon_url +'?=' + Math.random();
if (oldFavicon) {
    document.head.removeChild(oldFavicon);
}
document.head.appendChild(link);

摘自https://gist.github.com/mathiasbynens/428626#gistcomment-1809869 以防别人有同样的问题

如果你有以下HTML片段:

<link id="favicon" rel="shortcut icon" type="image/png" href="favicon.png" />

你可以使用Javascript通过改变这个链接上的HREF元素来改变favicon，例如(假设你正在使用JQuery):

$("#favicon").attr("href","favicon2.png");

您还可以创建一个Canvas元素，并将HREF设置为画布的ToDataURL()，就像Favicon Defender所做的那样。

下面是一些可以在Firefox, Opera和Chrome上运行的代码(不同于这里发布的其他答案)。下面是一个在IE11中也能运行的不同代码演示。下面的示例可能无法在Safari或Internet Explorer中运行。

/*!
 * Dynamically changing favicons with JavaScript
 * Works in all A-grade browsers except Safari and Internet Explorer
 * Demo: http://mathiasbynens.be/demo/dynamic-favicons
 */

// HTML5™, baby! http://mathiasbynens.be/notes/document-head
document.head = document.head || document.getElementsByTagName('head')[0];

function changeFavicon(src) {
 var link = document.createElement('link'),
     oldLink = document.getElementById('dynamic-favicon');
 link.id = 'dynamic-favicon';
 link.rel = 'shortcut icon';
 link.href = src;
 if (oldLink) {
  document.head.removeChild(oldLink);
 }
 document.head.appendChild(link);
}

然后你可以这样使用它:

var btn = document.getElementsByTagName('button')[0];
btn.onclick = function() {
 changeFavicon('http://www.google.com/favicon.ico');
};

叉子或查看演示。

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";

我会使用Greg的方法，为favicon.ico创建一个自定义处理程序 下面是一个(简化的)处理程序:

using System;
using System.IO;
using System.Web;

namespace FaviconOverrider
{
    public class IcoHandler : IHttpHandler
    {
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "image/x-icon";
        byte[] imageData = imageToByteArray(context.Server.MapPath("/ear.ico"));
        context.Response.BinaryWrite(imageData);
    }

    public bool IsReusable
    {
        get { return true; }
    }

    public byte[] imageToByteArray(string imagePath)
    {
        byte[] imageByteArray;
        using (FileStream fs = new FileStream(imagePath, FileMode.Open, FileAccess.Read))
        {
        imageByteArray = new byte[fs.Length];
        fs.Read(imageByteArray, 0, imageByteArray.Length);
        }

        return imageByteArray;
    }
    }
}

然后你可以在IIS6的web配置的httpHandlers部分使用该处理程序，或者在IIS7中使用' handler Mappings'特性。

2021年在Chrome上测试提出的解决方案时，我发现浏览器有时会缓存favicon，即使链接发生了变化，也不会显示更改

这段代码可以工作(类似于前面的建议，但添加了一个随机参数以避免缓存)

let oldFavicon = document.getElementById('favicon')
var link = document.createElement('link')
link.id = 'favicon';
link.type = 'image/x-icon'
link.rel = 'icon';
link.href = new_favicon_url +'?=' + Math.random();
if (oldFavicon) {
    document.head.removeChild(oldFavicon);
}
document.head.appendChild(link);

摘自https://gist.github.com/mathiasbynens/428626#gistcomment-1809869 以防别人有同样的问题