动态改变网站图标

问题描述

我有一个根据用户登录的网络应用程序，我想将页面的图标改为私人标签的标志，但是我找不到任何代码或任何示例去做这个。有人成功完成了吗？

我在一个文件夹中绘制了十几个图标，并且使用 favicon.ico 文件的引用只是与 HTML 页面一起生成的。思考？

最佳解决方案

为什么不？

(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 应该很酷。

编辑以正确覆盖现有图标

次佳解决方案

以下是 Firefox，Opera 和 Chrome 中的一些代码 (与此处发布的其他答案不同) 。仍然在 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');
};

Fork away 或 view a demo 。

第三种解决方案

如果您有以下 HTML 代码段：

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

您可以通过更改此链接上的 HREF 元素使用 Javascript 来更改该图标，例如 (假设您使用的是 JQuery)：

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

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

第四种方案

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

第五种方案

以下是我为 Opera，Firefox 和 Chrome 添加动态图标支持的一些代码。我不能让 IE 或 Safari 工作。基本上，Chrome 允许动态图标，但只有当页面的位置 (或其中的 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<links.length; i++) {
            var link = links[i]
            if (link.type == "image/x-icon" && link.rel == relValue) {
                this.docHead.removeChild(link)
                return}}}, // Assuming only one match at most.

    docHead: document.getElementsByTagName("head")[0]}

要改变 favicons，只需使用上面的 favicon.change("ICON URL")。

(以 http://softwareas.com/dynamic-favicons 为基础的代码 I) 。

第六种方案

标签在 head 标签中被声明为：

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

您应该能够在视图数据中传递所需图标的名称，并将其放入头标。

第七种方案

更现代的方法：

const changeFavicon = link => {
  let $favicon = document.querySelector('link[rel="icon"]')
  // If a <link rel="icon"> 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 <head>.
  } else {
    $favicon = document.createElement("link")
    $favicon.rel = "icon"
    $favicon.href = link
    document.head.appendChild($favicon)
  }
}

你可以这样使用它：

changeFavicon("http://www.stackoverflow.com/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’ 功能。

第九种方案

使 IE 工作的唯一方法是设置您的 Web 服务器来处理* .ico 的请求来调用您的服务器端脚本语言 (PHP，.NET 等) 。还要设置* .ico 重定向到单个脚本，并使此脚本提供正确的图标文件。如果您希望能够在不同的 favicons 之间的同一浏览器中来回弹起来，我确定缓存中还有一些有趣的问题。

参考文献

• Changing website favicon dynamically

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。