首页 文章

动态更改网站图标

提问于
浏览 次
284

我有一个Web应用程序，根据当前登录的用户进行品牌化 . 我想将页面的favicon更改为自有品牌的徽标，但我无法找到任何代码或任何示例去做这个 . 有没有人成功完成过这个？

我想象一下文件夹中有十几个图标，并且使用的favicon.ico文件的引用只是与HTML页面一起动态生成的 . 思考？

javascript html dom favicon

14 回答

  • -2

    为什么不？

    (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应该很酷 .

    编辑以正确覆盖现有图标

    回复于
  • 9

    这里有一些适用于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');
};

    Fork away或view a demo .

    回复于
  • 30

    如果您有以下HTML代码段：

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

    例如，您可以通过更改此链接上的HREF元素来使用Javascript更改favicon（假设您使用的是JQuery）：

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

    您还可以创建Canvas元素并将HREF设置为画布的ToDataURL（），就像Favicon Defender一样 .

    回复于
  • 2

    jQuery Version:

    $("link[rel='shortcut icon']").attr("href", "favicon.ico");

    甚至更好：

    $("link[rel*='icon']").attr("href", "favicon.ico");

    Vanilla JS version:

    document.querySelector("link[rel='shortcut icon']").href = "favicon.ico";

document.querySelector("link[rel*='icon']").href = "favicon.ico";
    回复于
  • 9

    更现代的方法：

    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")
    回复于
  • 39

    这里's some code I use to add dynamic favicon support to Opera, Firefox and Chrome. I couldn' t得到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]}

    要更改favicon，请使用上面的内容进入 favicon.change("ICON URL") .

    （根据http://softwareas.com/dynamic-favicons获取代码我基于此 . ）

    回复于
  • 10

    favicon在head标签中声明如下：

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

    您应该只能在视图数据中传递所需图标的名称并将其放入head标记中 .

    回复于
  • 74

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

    回复于
  • 0

    使IE工作的唯一方法是将Web服务器设置为处理* .ico的请求以调用服务器端脚本语言（PHP，.NET等） . 还要设置* .ico以重定向到单个脚本，并让此脚本提供正确的favicon文件 . 我相信如果你想在不同的favicons之间在同一个浏览器中来回跳转，那么缓存仍然会有一些有趣的问题 .

    回复于
  • 3

    根据WikiPedia，您可以使用 head 部分中的 link 标记指定要加载的favicon文件，参数为 rel="icon" .

    例如：

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

    我想如果你想为这个电话写一些动态内容，你就可以访问cookie，这样你就可以检索你的会话信息并提供适当的内容 .

    您可能会违反文件格式（据报道IE只支持它的.ICO格式，而大多数其他人都支持PNG和GIF图像）以及可能的缓存问题，无论是在浏览器上还是通过代理 . 这可能是因为favicon的原始版本，特别是用于标记带有网站迷你徽标的书签 .

    回复于
  • 2

    Yes totally possible

    • 在favicon.ico之后使用 querystring （以及其他文件链接 - 请参阅下面的答案链接）

    • 只需确保服务器使用正确的映像文件（可能是 static 路由规则或 dynamic 服务器端代码）响应"someUserId" .

    例如

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

    然后，您使用的任何服务器端语言/框架都应该能够轻松地找到基于userId的文件并提供它以响应该请求 .

    But to do favicons properly （其实是 really 复杂的主题）请在这里看到答案https://stackoverflow.com/a/45301651/661584

    A lot lot easier 而不是自己制定所有细节 .

    请享用 .

    回复于
  • 5

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

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

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

    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/

    回复于
  • 2

    我在我的项目中使用favico.js :)

    回复于

相关问题