动态更改网站图标

我有一个Web应用程序,根据当前登录的用户进行品牌化.我想将页面的favicon更改为自有品牌的徽标,但我无法找到任何代码或任何示例去做这个.有没有人成功完成过这个？

我想象一下文件夹中有十几个图标,并且使用的favicon.ico文件的引用只是与HTML页面一起动态生成的.思考？

1> keparo..：

---

为什么不？

(function() {
    var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = 'http://www.stackoverflow.com/favicon.ico';
    document.getElementsByTagName('head')[0].appendChild(link);
})();

Firefox应该很酷.

编辑以正确覆盖现有图标

---

因为这在IE中无效,你可以从`rel`属性中删除`shortcut`.[`shortcut`是一个无效的IE专有链接关系!](http://mathiasbynens.be/notes/rel-shortcut-icon)

---

您可以轻松查找现有的favicon链接并更新或替换它.

---

Google可以使用此网址为您提供网站的网站图标,将stackoverflow.com替换为您想要的网址:http://s2.googleusercontent.com/s2/favicons？domain =stoveroverflow.com

---

应该在Chrome的Javascript控制台中输入这个吗？我无法通过这种方式改变各种网站上的favicon.

2> Mathias Byne..：

---

这里有一些适用于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');
};

分开或观看演示.

---

这适用于所有当前支持的浏览器(IE 11,Edge,FF和Chrome)无法使用safari进行测试

3> fserb..：

---

如果您有以下HTML代码段:

例如,您可以通过更改此链接上的HREF元素来使用Javascript更改favicon(假设您使用的是JQuery):

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

您还可以创建Canvas元素并将HREF设置为画布的ToDataURL(),就像Favicon Defender一样.

4> vorillaz..：

---

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

5> Michał Perła..：

---

更现代的方法:

const changeFavicon = link => {
  let $favicon = document.querySelector('link[rel="icon"]')
  // If a  element already exists,
  // change its href to the given link.
  if ($favicon !== null) {
    $favicon.href = link
  // Otherwise, create a new element and append it to .
  } else {
    $favicon = document.createElement("link")
    $favicon.rel = "icon"
    $favicon.href = link
    document.head.appendChild($favicon)
  }
}

然后你可以像这样使用它:

changeFavicon("http://www.stackoverflow.com/favicon.ico")

6> Jeff Sheldon..：

---

favicon在head标签中声明如下:

您应该只能在视图数据中传递所需图标的名称并将其放入head标记中.

7> cryo..：

---

这是我用来为Opera,Firefox和Chrome添加动态favicon支持的一些代码.我无法让IE或Safari工作.基本上Chrome允许动态的favicons,但只有当页面的位置(或其中的iframe等)发生变化时才会更新它们,据我所知:

var IE = navigator.userAgent.indexOf("MSIE")!=-1
var favicon = {
    change: function(iconURL) {
        if (arguments.length == 2) {
            document.title = optionalDocTitle}
        this.addLink(iconURL, "icon")
        this.addLink(iconURL, "shortcut icon")

        // Google Chrome HACK - whenever an IFrame changes location 
        // (even to about:blank), it updates the favicon for some reason
        // It doesn't work on Safari at all though :-(
        if (!IE) { // Disable the IE "click" sound
            if (!window.__IFrame) {
                __IFrame = document.createElement('iframe')
                var s = __IFrame.style
                s.height = s.width = s.left = s.top = s.border = 0
                s.position = 'absolute'
                s.visibility = 'hidden'
                document.body.appendChild(__IFrame)}
            __IFrame.src = 'about:blank'}},

    addLink: function(iconURL, relValue) {
        var link = document.createElement("link")
        link.type = "image/x-icon"
        link.rel = relValue
        link.href = iconURL
        this.removeLinkIfExists(relValue)
        this.docHead.appendChild(link)},

    removeLinkIfExists: function(relValue) {
        var links = this.docHead.getElementsByTagName("link");
        for (var i=0; i

要更改favicon,只需favicon.change("ICON URL")使用上述内容即可.

(请参阅http://softwareas.com/dynamic-favicons获取基于此代码的代码.)

        

8> 小智..：
我会使用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中的"处理程序映射"功能.