Changing browser tab title & icons per folder


Hi folks,
I tend to have a lot of different Infinity folders open in different browser tabs and built this script to help me differentiate between them - it allows the tab title and favicon to be changed per folder.

Here’s a screenshot - here I have several different Infinity windows on folders in the same board - each has a distinct title and favicon:

If you’d like to do something similar to set this up you need a few things:

  • The tampermonkey extension for Chrome or Brave.
    • This runs the script against specified webpages to set the title & icon. I think the script should be compatible with the greasemonkey extension in Firefox but I haven’t tested that.
  • The folder IDs for the folders you want to change the title & icon for
  • Favicons - if you want different icons for each folder you’ll need to generate favicons using a tool such as this one and then upload the .ico files somewhere publicly e.g. on Dropbox
  • The script - you’ll need to modify this to use the appropriate folder IDs and favicon URLs. Save the code at the bottom of this post as RenameInfinityBrowserTabTitles.js and load into GreaseMonkey

Please shout if you have any questions …

// ==UserScript==
// @name        Rename Infinity browser tab titles
// @namespace   GB
// @include*/*
// @version     1
// @grant       GM_log
// @description Change tab titles on Infinity
// ==/UserScript==

// get name of folder based on third part of path
var path = window.location.pathname.split("/")
var folder = path[3];
var title = "";
switch(folder) {
  case "Pf36cXHePgP":
    title = "A folder";
  case "S9a15We8jGJ":
    title = "A different folder";
  case "sbFx4tUh8MG":
    title = "A third one";

function changeFavicon(src) {
 var link = document.createElement('link'),
     oldLink = document.getElementById('dynamic-favicon'); = 'dynamic-favicon';
 link.rel = 'shortcut icon';
 link.href = src;
 if (oldLink) {

// code from Facebook script - ensures that title remains changed
var target = document.querySelector('title');
var config = { attributes: true, childList: true, characterData: true }
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (title) {
      switch(title) {
       case "A folder":
         changeFavicon('URL to icon.ico');
       case "A different folder":
         changeFavicon('URL to icon.ico');
       case "A third one":
         changeFavicon('URL to icon.ico');
      document.title = title + " > Infinity";
    } else {
      console.log("Unknown folder - check TamperMonkey script");
    observer.observe(target, config);
observer.observe(target, config);
1 Like


great idea! i also feel differentiated favicons are missing

in fact i’d really appreciate to see my workspace avatar / organisation logo instead of the Infinity favicon so that i can intuitively navigate my tabs & be sure i open my projects and not a landing page or a forum or a help page or anything else; it could maybe be adjustable if someone prefers to leave the grandient Infinity logo stay?

i’d also love to adjust folder icons with pictograms or emojis & then maybe see a solution similiar to that proposed by @gordon

brilliant input, Gordon!