Disable Slack’s Unread Favicon Dot in Firefox

I use Slack as a web application in Firefox instead of using the official desktop application. I won’t go into detail about why, but the main reason is that I use Firefox Multi-Account Containers, and I want links in Slack to open in a specific browser container, which is not possible from the Slack desktop application.

One feature of the Slack web application that I particularly dislike is its dynamic favicon: a dot appears when there are unread messages, and it turns red for mentions or other higher-priority notifications.

Normal	Unread	Highlight
No unread messages	Unread messages	Mentions or higher-priority notifications

While these indicators may seem convenient at first, they are distracting when you are trying to focus. And because Slack sits in my web browser, they are constantly visible on screen.

Slack allows you to pause notifications easily, but doing so does not prevent the red dot favicon indicator from appearing whenever there are unread messages.

I finally found a solution to get rid of it in Firefox in an elegant way, without requiring any extra add-ons.

First, you need to enable toolkit.legacyUserProfileCustomizations.stylesheets in about:config. This allows for advanced Firefox UI customisation through CSS.

Then, you need to add a CSS override to replace the web application’s dynamic favicon with a static one. To do this, you need to create a new chrome/userChrome.css file in Firefox’s profile root folder (you can find this in about:profiles), if it does not already exist, and add the following content:

/* Prevent Slack's changing favicon */
.tabbrowser-tab[pinned][label*="Slack"] .tab-icon-image {
    content: url("https://app.slack.com/favicon.ico") !important;
}

/* Also remove Firefox's separate pinned-tab attention indicator */
.tabbrowser-tab[pinned][label*="Slack"] .tab-content[titlechanged] {
    background-image: none !important;
}

The second rule removes the blue notification dot that Firefox shows on top of pinned tabs when their titles change. It is visible in the screenshot above, but for the Slack web application, that is only an issue when opening the browser, not for new notifications.

Finally, restart Firefox and… voilà.

Sadly, it is not possible to toggle this override dynamically. Personally, I prefer the fine-grained control of the pop-up notifications anyway, so I’m fine living permanently without the red dot favicon indicator.