动态更改网站图标

JavaScript HTML

十三

2020-03-23

我有一个Web应用程序,该应用程序根据当前登录的用户进行了品牌标记。我想将页面的图标更改为自有品牌的徽标,但是我找不到任何代码或如何使用该示例的示例。去做这个。以前有人成功做到过吗?

我正在想象一个文件夹中有十二个图标,并且要使用的favicon.ico文件的引用是随HTML页面一起动态生成的。有什么想法吗?

第3076篇《动态更改网站图标》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

7个回答
泡芙樱 2020.03.23

是的,完全有可能

  • 在favicon.ico之后使用查询字符串(和其他文件链接-请参阅下面的答案链接)
  • 只需确保服务器使用正确的图像文件(可以是静态路由规则或 动态服务器端代码)来响应“ someUserId”

例如

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

然后,不管服务器端语言/框架您使用应该很容易能够找到依据的用户id文件,并在服务它应这一要求

但是要正确地进行网站图标设置(这实际上是一个非常复杂的主题),请在此处查看答案https://stackoverflow.com/a/45301651/661584

比自己制定所有细节容易得多。

请享用。

神无 2020.03.23

在项目中使用favico.js

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

在内部,它canvas用于呈现,base64数据URL用于图标编码。

该库还具有不错的功能:图标徽章和动画;据说,您甚至可以将网络摄像头视频流式传输到图标中:)

飞云 2020.03.23

使IE能够正常工作的唯一方法是将Web服务器设置为处理* .ico的请求,以调用服务器端脚本语言(PHP,.NET等)。还要设置* .ico以重定向到单个脚本,并让该脚本传递正确的favicon文件。我敢肯定,如果您希望能够在同一浏览器中的不同图标之间来回弹跳,则缓存仍然会遇到一些有趣的问题。

小胖Gil 2020.03.23

我将使用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中使用“处理程序映射”功能。

DavaidTony宝儿 2020.03.23

根据WikiPedia的介绍,您可以使用部分中的link标记(head参数为)指定要加载的收藏夹文件rel="icon"

例如:

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

我想如果您想为该呼叫编写一些动态内容,则可以访问cookie,以便可以以这种方式检索会话信息并显示适当的内容。

您可能会碰到文件格式(据报道IE仅支持.ICO格式,而其他大多数人都支持PNG和GIF图像),并且可能在浏览器和代理上存在缓存问题。这是因为favicon最初的意图,特别是用站点的迷你徽标标记书签的原因。

樱Jim西里 2020.03.23

图标在head标签中声明,如下所示:

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

您应该能够只在视图数据中传递所需图标的名称,然后将其扔到head标签中。

老丝 2020.03.23

如果您具有以下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一样。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android