我有一个网络应用程序,根据当前登录的用户进行标记。我想将页面的图标更改为私有标签的标志,但我无法找到如何做到这一点的任何代码或任何示例。以前有人成功做到过吗?

我想象在一个文件夹中有12个图标,使用哪个favicon.ico文件的引用是与HTML页面一起动态生成的。想法吗?


当前回答

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

其他回答

favicon在head标签中声明,如下所示:

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

您应该能够在视图数据中传递您想要的图标的名称,并将其扔到head标记中。

我会使用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'特性。

我在我的项目中使用favico.js。

它允许将图标更改为一系列预定义的形状和自定义的形状。

在内部,它使用canvas渲染和base64数据URL图标编码。

这个库也有不错的功能:图标徽章和动画;据说,你甚至可以流网络摄像头视频到图标:)

为什么不呢?

var link = document.querySelector("link[rel~='icon']");
if (!link) {
    link = document.createElement('link');
    link.rel = 'icon';
    document.head.appendChild(link);
}
link.href = 'https://stackoverflow.com/favicon.ico';

下面是一些可以在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');
};

叉子或查看演示。