我有一个网络应用程序,根据当前登录的用户进行标记。我想将页面的图标更改为私有标签的标志,但我无法找到如何做到这一点的任何代码或任何示例。以前有人成功做到过吗?
我想象在一个文件夹中有12个图标,使用哪个favicon.ico文件的引用是与HTML页面一起动态生成的。想法吗?
我有一个网络应用程序,根据当前登录的用户进行标记。我想将页面的图标更改为私有标签的标志,但我无法找到如何做到这一点的任何代码或任何示例。以前有人成功做到过吗?
我想象在一个文件夹中有12个图标,使用哪个favicon.ico文件的引用是与HTML页面一起动态生成的。想法吗?
当前回答
下面是一个片段,使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('❤️');
其他回答
一个更现代的方法:
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'特性。
在大多数情况下,favicon是这样声明的。
<link rel="icon" href"...." />
这样你就可以得到它的参考。
const linkElement = document.querySelector('link[rel=icon]');
你可以用这个改变图像
linkElement.href = 'url/to/any/picture/remote/or/relative';
唯一的方法,使此工作的IE是设置您的web服务器处理*.ico请求调用您的服务器端脚本语言(PHP, . net等)。还设置*.ico重定向到单个脚本,并让该脚本交付正确的favicon文件。我敢肯定,如果你想在同一个浏览器中在不同的favicon之间来回跳转,缓存仍然会有一些有趣的问题。
favicon在head标签中声明,如下所示:
<link rel="shortcut icon" type="image/ico" href="favicon.ico">
您应该能够在视图数据中传递您想要的图标的名称,并将其扔到head标记中。