动态更改网站图标
我有一个根据当前登录的用户标记的 Web 应用程序。我想将页面的 favicon 更改为私有标签的徽标，但我找不到任何代码或任何示例去做这个。有没有人成功地做到过这一点？
我正在想象一个文件夹中有十几个图标，并且对要使用的 favicon.ico 文件的引用只是与 HTML 页面一起动态生成的。想法？
为什么不？
var link = document.querySelector("link[rel~='icon']");
if (!link) {
link = document.createElement('link');
link.rel = 'icon';
document.getElementsByTagName('head')[0].appendChild(link);
}
link.href = 'https://stackoverflow.com/favicon.ico';
这是一些适用于 Firefox、Opera 和 Chrome 的代码（与此处发布的所有其他答案不同）。这也是一个不同的 demo of code that works in 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');
};
document.head || document.head = document.getElementsByTagName('head')[0]; Uncaught ReferenceError: Invalid left-hand side in assignment
如果您有以下 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 所做的那样。
favicon.png。这可能需要在服务器端完成。
document.getElementById('favicon').setAttribute('href','favicon2.png') 更改 #favicon 的 href 属性也许您可以将其添加到您的帖子@fserb？
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";
更现代的方法：
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 在 head 标记中声明，如下所示：
<link rel="shortcut icon" type="image/ico" href="favicon.ico">
您应该能够在视图数据中传递您想要的图标的名称并将其放入 head 标记中。
这是使网站图标成为表情符号或文本的片段。当我在stackoverflow时，它在控制台中工作。
function changeFavicon(text) {
const canvas = document.createElement('canvas');
canvas.height = 64;
canvas.width = 64;
const ctx = canvas.getContext('2d');
ctx.font = '64px serif';
ctx.fillText(text, 0, 64);
const link = document.createElement('link');
const oldLinks = document.querySelectorAll('link[rel="shortcut icon"]');
oldLinks.forEach(e => e.parentNode.removeChild(e));
link.id = 'dynamic-favicon';
link.rel = 'shortcut icon';
link.href = canvas.toDataURL();
document.head.appendChild(link);
}
changeFavicon('❤️');
这是我用来向 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]}
要更改网站图标，只需使用上述方法转到 favicon.change("ICON URL")。
（我基于此的代码归功于 http://softwareas.com/dynamic-favicons。）
或者如果你想要一个表情:)
var canvas = document.createElement("canvas");
canvas.height = 64;
canvas.width = 64;
var ctx = canvas.getContext("2d");
ctx.font = "64px serif";
ctx.fillText("☠️", 0, 64);
$("link[rel*='icon']").prop("href", canvas.toDataURL());
https://koddsson.com/posts/emoji-favicon/ 的道具
使 IE 工作的唯一方法是设置您的 Web 服务器以处理对 *.ico 的请求以调用您的服务器端脚本语言（PHP、.NET 等）。还设置 *.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 中的“处理程序映射”功能。
对于那些使用 jQuery 的人来说，有一个单行解决方案：
$("link[rel*='icon']").prop("href",'https://www.stackoverflow.com/favicon.ico');
我在开发站点时一直使用此功能......所以我可以一目了然地看到哪个选项卡在其中运行本地、开发或产品。
现在 Chrome 支持 SVG favicon，这让它变得容易多了。
Tampermonkey 脚本
在 https://gist.github.com/elliz/bb7661d8ed1535c93d03afcd0609360f 中查看指向我在 https://elliz.github.io/svg-favicon/ 中找到的演示站点的 Tampermonkey 脚本
基本代码
从另一个答案改编而来......可以改进但足以满足我的需求。
(function() {
'use strict';
// play with https://codepen.io/elliz/full/ygvgay for getting it right
// viewBox is required but does not need to be 16x16
const svg = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<circle cx="8" cy="8" r="7.2" fill="gold" stroke="#000" stroke-width="1" />
<circle cx="8" cy="8" r="3.1" fill="#fff" stroke="#000" stroke-width="1" />
</svg>
`;
var favicon_link_html = document.createElement('link');
favicon_link_html.rel = 'icon';
favicon_link_html.href = svgToDataUri(svg);
favicon_link_html.type = 'image/svg+xml';
try {
let favicons = document.querySelectorAll('link[rel~="icon"]');
favicons.forEach(function(favicon) {
favicon.parentNode.removeChild(favicon);
});
const head = document.getElementsByTagName('head')[0];
head.insertBefore( favicon_link_html, head.firstChild );
}
catch(e) { }
// functions -------------------------------
function escapeRegExp(str) {
return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}
function replaceAll(str, find, replace) {
return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
}
function svgToDataUri(svg) {
// these may not all be needed - used to be for uri-encoded svg in old browsers
var encoded = svg.replace(/\s+/g, " ")
encoded = replaceAll(encoded, "%", "%25");
encoded = replaceAll(encoded, "> <", "><"); // normalise spaces elements
encoded = replaceAll(encoded, "; }", ";}"); // normalise spaces css
encoded = replaceAll(encoded, "<", "%3c");
encoded = replaceAll(encoded, ">", "%3e");
encoded = replaceAll(encoded, "\"", "'"); // normalise quotes ... possible issues with quotes in <text>
encoded = replaceAll(encoded, "#", "%23"); // needed for ie and firefox
encoded = replaceAll(encoded, "{", "%7b");
encoded = replaceAll(encoded, "}", "%7d");
encoded = replaceAll(encoded, "|", "%7c");
encoded = replaceAll(encoded, "^", "%5e");
encoded = replaceAll(encoded, "`", "%60");
encoded = replaceAll(encoded, "@", "%40");
var dataUri = 'data:image/svg+xml;charset=UTF-8,' + encoded.trim();
return dataUri;
}
})();
只需将您自己的 SVG（如果您使用工具，可以使用 Jake Archibald 的 SVGOMG 清理）放入顶部的 const 中。确保它是方形的（使用 viewBox 属性），你就可以开始了。
在大多数情况下，favicon 是这样声明的。
<link rel="icon" href"...." />
这样，您就可以通过 this 获得对它的引用。
const linkElement = document.querySelector('link[rel=icon]');
你可以用这个改变图片
linkElement.href = 'url/to/any/picture/remote/or/relative';
根据 WikiPedia，您可以使用 head 部分中的 link 标记指定要加载的网站图标文件，参数为 rel="icon"。
例如：
<link rel="icon" type="image/png" href="/path/image.png">
我想如果您想为该调用编写一些动态内容，您将可以访问 cookie，以便您可以通过这种方式检索会话信息并呈现适当的内容。
您可能会遇到文件格式（据报道 IE 仅支持它的 .ICO 格式，而大多数其他人都支持 PNG 和 GIF 图像）以及可能存在缓存问题，无论是在浏览器上还是通过代理。这可能是因为 favicon 的初衷，特别是用于标记带有站点迷你徽标的书签。
是的，完全有可能
在 favicon.ico 之后使用查询字符串（和其他文件链接 - 请参阅下面的答案链接）
只需确保服务器使用正确的图像文件（可能是静态路由规则或动态服务器端代码）响应“someUserId”。
例如
<link rel="shortcut icon" href="/favicon.ico?userId=someUserId">
然后，无论您使用什么服务器端语言/框架，都应该能够轻松地根据 userId 找到该文件，并根据该请求提供该文件。
但要正确制作网站图标（它实际上是一个真的复杂的主题）请在此处查看答案https://stackoverflow.com/a/45301651/661584
比自己解决所有细节要容易得多。
享受。
<link>，而是寻找 apple-touch-icon 或其他类似的变体。
我在我的项目中使用 favico.js。
它允许将 favicon 更改为一系列预定义的形状以及自定义形状。
在内部，它使用 canvas 进行渲染，使用 base64 数据 URL 进行图标编码。
该库还具有不错的功能：图标徽章和动画；据称，您甚至可以将网络摄像头视频流式传输到图标中 :)
在 Chrome 上测试 2021 年提出的解决方案，我发现有时浏览器会缓存 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 复制，以防其他人有同样的问题
关注公众号
不定期副业成功案例分享
rel属性中删除shortcut。shortcutis an invalid IE-proprietary link relation!