动态更改网站图标

347

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

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

javascript  html  dom  favicon 
— SqlRyan
source
40
网站图标中有一个街机游戏。
— Corey Trager
请注意，Chrome的动态网站图标实现存在错误，并且占用过多的CPU。请参阅code.google.com/p/chromium/issues/detail?id=121333
— brillout 2012年
6
街机游戏的链接已更改。这是正确的。
— 罗勒
请参阅stackoverflow.com/questions/6296574/…，了解如何通过在画布上用模板图像绘制来动态更新图标。
— 处理
1
可接受答案中提供的代码示例中的小错误。我的信誉评分不足，无法对答案发表评论，因此请在这里写下。最后一行的括号互换了：}（））; 应该读 }）（）; 最好更新代码示例，因为它很可能被其他人复制和粘贴。
— Goran W

Answers:

396

为什么不？

(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应该很棒。

编辑以正确覆盖现有图标

— 凯帕罗
source
2
我认为这与我要寻找的内容很接近，但是我如何从数据库中获取适当的HREF。我想我必须通过javascript进行服务器查找，但我不希望它变得过于复杂。谢谢你的提示。
— SqlRyan
34
由于无论如何这在IE中都不起作用，因此可以shortcut从rel属性中删除。shortcut是无效的IE专有链接关系！
— Mathias Bynens 2010年
8
您可以轻松地查找现有的图标链接并进行更新或替换。
— keparo
5
Google可以使用以下网址为您提供网站的网站图标，将stackoverflow.com替换为您想要的域：s2.googleusercontent.com/s2/favicons?
— kirb 2011年
5
是否应该在Chrome的Javascript控制台中输入此密码？我无法以这种方式更改各个站点上的图标。
— powerj1984
88

以下是一些可在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');
};

分叉或观看演示。

— 马蒂亚斯·拜恩斯（Mathias Bynens）
source
该浏览器漏洞被固定在Chrome 6（发布9月10日），因此Chrome黑客是不是真的有必要了-其实，我强烈建议不要，因为它打破了前进按钮使用它。
— josh3736 2011年
Chrome错误可能已得到修复，但在14.0.835.187中再次被修复。
— danorton 2011年
该演示不适用于Chrome 21 / WinXP。
— 雨果
在Chrome 26 / Win7中，演示不适用于我。document.head || document.head = document.getElementsByTagName('head')[0]; Uncaught ReferenceError: Invalid left-hand side in assignment
— 帕特里克
2
在所有当前支持的浏览器（IE 11，Edge，FF和Chrome）中均无法使用Safari浏览器进行测试
— Aaron
46

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

— fserb
source
1
我认为在JS运行时，浏览器已经看到了链接并尝试加载favicon.png。这可能需要在服务器端完成。
— cHao 2012年
如果你不使用JQuery，您可以更改href的属性#favicon使用document.getElementById('favicon').setAttribute('href','favicon2.png') 也许你可以把它添加到您的文章@fserb？
— johannchopin
37

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";
— 沃里拉兹
source
@pkExec这个和上面的keparo答案（选择的答案）的结合使它对ff和chrome都适用。
— MrShmee
17

更现代的方法：

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")
— MichałPerłakowski
source
11

图标在head标签中声明，如下所示：

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

您应该只需要在视图数据中传递所需图标的名称，然后将其扔到head标签中即可。

— 杰夫·谢尔顿
source
1
IIRC，但是，某些浏览器（我正朝着您的方向，即IE）并不真正尊重这一点。
— 马修·申克尔
（我发现仅在正确的位置放置图标文件，而不是在显式链接中获得更好的结果）。
— 马修·申克尔
9

这是一些我用来向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的信用。）

— 低温
source
将Chrome有错误，被固定在Chrome 6（发布9月10日），因此Chrome黑客是不是真的有必要了-其实，我强烈建议不要，因为它打破了前进按钮使用它。
— josh3736 2011年
Chrome仍然存在相同的错误，尽管情况与所指出的特定错误略有不同。code.google.com/p/chromium/issues/detail?id=99549
— danorton 2011年
4

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

— 担
source
1
我真的很好奇为什么这被否决了？考虑到其他人都依赖可能不可用的脚本，这实际上是最好的答案。
— ethermal 2015年
1
@ethermal因为它看起来在服务器端是动态的。OP要求客户方面具有活力。
— 亚历克西斯威尔克
3

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

— 格雷格
source
3

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

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

或者，如果您想要图释:)

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/

— max4ever
source
2

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

例如：

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

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

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

— 静态的
source
不仅如此。stackoverflow.com/a/45301651/661584生成器站点上的常见问题解答/信息将使您感到惊讶-这个主题有很多。
— MemeDeveloper
3
网络在9年内发生了很大变化。
— staticsan '17年
2

是的，完全有可能

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

例如 

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

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

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

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

请享用。

— MemeDeveloper
source
是的，链接很好。我认为这些答案在IE中不起作用的主要原因是因为它们不使用该默认图标<link>，而是寻找apple-touch-icon或其他类似的变体。
— 亚历克西斯威尔克
1

我在项目中使用favico.js。

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

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

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

— 奥斯卡·内瓦雷斯（Oscar Nevarez）
source
链接和库非常有用，请提供其工作方式的说明，这样也可以有效解决上述问题。
— Dima Tisnek '19
1
谢谢@DimaTisnek。我已经更新了答案。
— 奥斯卡·内瓦雷斯
0

开发网站时，我一直都在使用此功能……因此，我可以一目了然地看到哪个选项卡中正在运行本地，开发或生产。

现在，Chrome支持SVG网站图标，这使它变得更加容易。

坦帕蒙奇脚本

在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属性），并且一切顺利。

— 拉斯金
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.