动态更改网站图标

小开

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

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

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

小开

最佳答案

为什么不呢?

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

小开

如果你有以下HTML片段:

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

你可以使用Javascript通过改变这个链接上的HREF元素来改变favicon，例如(假设你正在使用JQuery):

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

你也可以创建一个Canvas元素，并将HREF设置为Canvas的ToDataURL()，就像收藏夹图标后卫一样。

小开

根据维基百科，你可以使用head部分中的link标记指定要加载的favicon文件，参数为rel="icon"。

例如:

 <link rel="icon" type="image/png" href="/path/image.png">

我想，如果您想为该调用编写一些动态内容，那么您就可以访问cookie，以便以这种方式检索会话信息并显示适当的内容。

你可能会遇到文件格式的问题(据报道IE只支持。ico格式，而大多数人都支持PNG和GIF图像)，也可能会遇到缓存问题，无论是在浏览器上还是通过代理。这可能是因为favicon最初的意图，特别是用网站的迷你标志标记书签。

小开

下面是我用来为Opera、Firefox和Chrome添加动态图标支持的一些代码。不过我无法让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<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的代码，我基于此。)

小开

下面是一些可以在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是设置您的web服务器处理*.ico请求调用您的服务器端脚本语言(PHP， . net等)。还设置*.ico重定向到单个脚本，并让该脚本交付正确的favicon文件。我敢肯定，如果你想在同一个浏览器中在不同的favicon之间来回跳转，缓存仍然会有一些有趣的问题。

小开

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

小开

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.ico(和其他文件链接-)后使用变量的名称 参见下面的答案链接)
简单地确保服务器响应"someUserId"用正确的映像文件(可以是静态路由规则，或者动态服务器端代码)。

如。

<link rel="shortcut icon" href="/favicon.ico?userId=someUserId">

然后你使用的任何服务器端语言/框架应该可以很容易地找到基于userId的文件并将其提供给对请求的响应。

但是要正确地做favicons(它实际上是一个< em >真的复杂主题)，请在这里看到答案https://stackoverflow.com/a/45301651/661584

简单多了而不是自己解决所有的细节。

享受。

小开

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

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

在内部，它使用canvas进行渲染，使用base64数据URL进行图标编码。

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

小开

对于那些使用jQuery的人来说，有一个单行解决方案:

$("link[rel*='icon']").prop("href",'https://www.stackoverflow.com/favicon.ico');

小开

或者如果你想要一个表情符号:)

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/的道具

小开

在开发网站时，我一直在使用这个功能……这样我就可以一目了然地看到哪个选项卡有本地，开发或刺激运行在它。

现在Chrome支持SVG favicons，这让它变得更容易了。

Tampermonkey脚本

在https://gist.github.com/elliz/bb7661d8ed1535c93d03afcd0609360f中查看一个tampermonkey脚本，该脚本指向我在https://elliz.github.io/svg-favicon/中抛出的演示站点

基本代码

改编自另一个答案…可以改进，但足以满足我的需求。

(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成为一个表情符号或文本。当我在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('❤️');

小开

在大多数情况下，favicon是这样声明的。

<link rel="icon" href"...." />

这样你就可以得到它的参考。

const linkElement = document.querySelector('link[rel=icon]');

你可以用这个改变图像

linkElement.href = 'url/to/any/picture/remote/or/relative';

小开

2021年在Chrome上测试提出的解决方案时，我发现浏览器有时会缓存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 以防其他人有同样的问题