dynamic改变网站图标
我有一个Web应用程序，根据当前login的用户品牌。我想要更改页面的图标作为私人标签的标志，但我无法find任何代码或任何示例如何去做这个。 有没有人成功地做到这一点？
我想象在一个文件夹中有十几个图标，并且使用favicon.ico文件的引用只是与HTML页面一起dynamic生成。 思考？
为什么不？
(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中的一些代码（不同于此处发布的其他所有答案）。 尽pipe在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'); };
叉掉或观看演示 。
如果您有以下HTML片段：
<link id="favicon" rel="shortcut icon" type="image/png" href="favicon.png" />
你可以通过改变这个链接上的HREF元素来改变使用Javascript的图标，例如（假设你使用的是JQuery）：
$("#favicon").attr("href","favicon2.png");
您也可以创build一个Canvas元素，并将HREF设置为canvas的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添加dynamic图标支持的一些代码。 我不能让IE或Safari工作。 基本上Chrome允许dynamic图标，但只有当页面的位置（或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]}
要更改favicon.change("ICON URL") ，只需使用上面的favicon.change("ICON URL") 。
（根据我的代码，可以通过http://softwareas.com/dynamic-favicons获得）。;
favicon在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")
我会使用格雷格的方法，并为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的Webconfiguration的httpHandlers部分中使用该处理程序，或者在IIS7中使用“处理程序映射”function。
使IE浏览器能够正常工作的唯一方法就是设置你的web服务器来处理* .ico的请求来调用你的服务器端脚本语言（PHP，.NET等）。 还设置* .icoredirect到一个单一的脚本，并有这个脚本提供正确的图标文件。 我敢肯定，如果你想能够在不同的小图标之间的同一个浏览器中来回跳动，那么caching仍然会有一些有趣的问题。
根据WikiPedia ，您可以使用head部分中的link标签来指定要加载的favicon文件，参数为rel="icon" 。
例如：
<link rel="icon" type="image/png" href="/path/image.png">
我想如果你想为这个调用写一些dynamic的内容，你可以访问cookie，这样你就可以通过这种方式检索你的会话信息，并提供适当的内容。
您可能会遇到文件格式（IE据说只支持.ICO格式，而大多数其他人都支持PNG和GIF图像），并可能在浏览器和代理服务器上caching问题。 这可能是因为favicon的原创性，特别是用网站的迷你标志标记书签。
是完全可能的
- 在favicon.ico（和其他文件链接 – 请参阅下面的答案链接）后使用查询string
- 只要确保服务器使用正确的映像文件（可以是静态路由规则或dynamic服务器端代码）来响应“someUserId”。
例如
<link rel="shortcut icon" href="/favicon.ico?userId=someUserId">
那么无论你使用的服务器端语言/框架应该能够很容易地find基于userId的文件，并为响应该请求而提供服务器端语言/框架 。
但要正确地做favicons （其实是一个非常复杂的主题），请参阅这里的答案https://stackoverflow.com/a/45301651/661584
比自己搞清楚所有的细节要容易得多。
请享用。
你可以这样做：
function changeicon(x){ document.head.innerHTML = "<link href='" + x + "' rel='shortcut icon'><title>" + document.title; } changeicon("mycoolicon.png");
我做到了这一点，它工作得很好。
