How to change the Logo on the Firefox New Tab page

This page exists because I spent way too 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;
    }
  }

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!