A screenshot of the Firefox New Tab page with the logo replaced by a piece of furry art

How to change the Logo on the Firefox New Tab page

This page exists because I spent way to much time figuring out how to replace the logo displayed on Firefox' New Tab page with a different logo and friends wanted to know how I did it.

Figure out where your Firefox Profile is stored

I won't go into much detail on this one because Mozilla already has an article on how to find the Profile folder , check that if you need more detailed help.

On Linux the Profile usually is a folder with a cryptic name inside ~/.mozilla/firefox

Place some files

Inside your profile folder, create a new folder called chrome, inside this folder place the image you want to use as logo and create a text file named userContent.css with this content:

@-moz-document
  url-prefix(about:home),
  url-prefix(about:newtab),
  url-prefix(about:privatebrowsing)
  {
    .logo
    {
      background: url("FILENAME") no-repeat center !important;
      background-size: 256px !important;
      height: 256px !important;
      width: 256px !important;
    }
  }
FILENAME should be the name of the image file you want to use, the size, height and width values need to match the dimensions of your image.

Enable legacy user styles

In Firefox, open about:config, search for toolkit.legacyUserProfileCustomizations.stylesheets and set it to true.

Restart Firefox

This is necessary for every change you make to any of the files in the chrome folder.

Enjoy!