I'd like to prevent the favicon from changing on Firefox on my Mac.

I'm thinking that I might be able to do it with Grease Monkey.

My goal is to prevent things like Slack from changing the Favicon to indicate there's a notification.

Can I tell websites that they must use the same favicon they loaded with without changing it?

  • Did you check for some extension [such as this one]addons.mozilla.org/en-CA/firefox/addon/favicon-customizer/…) among the others. You can set for an url a custom icon/image that can be the original one too Iif you donwload... BTW It is difficult that a general solution may exists. For a specific site/version maybe. I do not remember if the above addon works on subpages too (example.com/*) or only on a defined url, but it is not the only one working on favicons.
    – Hastur
    Jul 28 '20 at 11:11
  • I bet that I can do something like this with Grease Monkey, but I don't know how
    – Cauder
    Jul 28 '20 at 14:21

You can write a Greasemonkey script that uses a Javascript mutation observer to observe when the favicon changes and then change it back immediately before you notice anything.

Here is how to do this:

  1. If you haven't done so already, install the Greasemonkey Firefox extension (this question is about Firefox, but you can also do this on Chrome and Edge by using the Tampermonkey extension: link for Chrome, link for Edge)

  2. Click on the Greasemonkey menu in the top bar, then select "New user script..." (if you're using Tampermonkey, the button is called "Create a new script...")

  3. When you've clicked on that button, it should open a new tab with a big text area where you can write Javascript code. The text area will probably already have some code in it. Simply delete that code and replace it with this:

    // ==UserScript==
    // @name         Do not change the favicon
    // @namespace    http://tampermonkey.net/
    // @version      0.1
    // @description  Prevents sites from changing the favicon
    // @author       You
    // @match        http://*/*
    // @match        https://*/*
    // @grant        none
    // ==/UserScript==
    (function() {
        'use strict';
        //Initialize some variables
        var favicon = document.querySelector("link[rel='shortcut icon']");
        const initialIcon = favicon.href;
        //Define the function to run when the favicon changes
        var observer = new MutationObserver(function(){
            if(favicon.href != initialIcon){
                favicon.href = initialIcon;    //Change the favicon back directly when it changes before you notice anything
        //Run the function above whenever the favicon changes
        observer.observe(favicon, {attributes: true});

    The lines on the top that start with // define properties of the script. @name defines the name of the script, and @match defines on which sites the script should be run (http://*/* and https://*/* means all sites).

    The part on the bottom is the actual script with keeps the favicon from changing. As I explained in the beginning of my answer, what it does is it detects when the favicon changes and quickly changes it back before you notice anything.

  4. Press Ctrl+S to save the script, and then you should be done.

  • Unfortunately this isn't working for me
    – Cauder
    Sep 24 '20 at 18:17

You'd have to edit the cookie tied to the site/web app and change the value that allows notification. There are extensions like CookieCutter that allow you to edit cookies although that one is for Safari.

  • It's perfectly possible for sites to change the favicon dynamically without setting a cookie. While some sites might set cookies to decide whether or not to change the favicon, in general the two are unrelated. Jul 30 '20 at 8:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.