我有一个网络应用程序,根据当前登录的用户进行标记。我想将页面的图标更改为私有标签的标志,但我无法找到如何做到这一点的任何代码或任何示例。以前有人成功做到过吗?

我想象在一个文件夹中有12个图标,使用哪个favicon.ico文件的引用是与HTML页面一起动态生成的。想法吗?


当前回答

根据WikiPedia,你可以使用头部部分的链接标签指定加载哪个favicon文件,参数rel="icon"。

例如:

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

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

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

其他回答

唯一的方法,使此工作的IE是设置您的web服务器处理*.ico请求调用您的服务器端脚本语言(PHP, . net等)。还设置*.ico重定向到单个脚本,并让该脚本交付正确的favicon文件。我敢肯定,如果你想在同一个浏览器中在不同的favicon之间来回跳转,缓存仍然会有一些有趣的问题。

是的,完全可能

在favicon.ico(和其他文件链接- 见下面的答案链接) 只需确保服务器响应“someUserId” 正确的映像文件(可以是静态路由规则或 动态服务器端代码)。

如。

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

然后,无论您使用何种服务器端语言/框架,都应该能够轻松地基于userId找到该文件,并响应该请求。

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

这比你自己解决所有细节要容易得多。

享受。

根据WikiPedia,你可以使用头部部分的链接标签指定加载哪个favicon文件,参数rel="icon"。

例如:

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

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

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

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 以防别人有同样的问题

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

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

篡改猴脚本

在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属性),然后就可以开始了。