Workaround on how to upload transparent custom shortcuts to the new tab page

[u/not_gerg]

On the new tab page, if you attempt to upload a custom picture with transparency, for whatever reason FireFox converts the image's transparency to white, instead of preserving it (even tho its preserved when its auto generated). Unfortunately this bug has not been fixed, and its been at least 4 nearly 5 years, according to bug 1758932. I have found a workaround however

• Get your desired icon's png, and put it in the chrome folder. the same one with userChrome.css and userContent.css

• In userContent.css, paste in the following code, replacing the placeholders with what is needed:

  @-moz-document@-moz-document url("about:newtab"), url("about:home") {   a.top-site-button[href*="[DOMAIN OF SHORTCUT]"] .top-site-icon {     background-image: url("[NAME OF ICON FILE]") !important;     background-color: transparent !important;     background-size: contain !important;     background-position: center !important;     background-repeat: no-repeat !important;   } }

you can use just the domain, or the whole link if you have multiple shortcuts with the same domain, but want different icons. to do multiple icons, just paste in the code a few more times, changing the domain and file names, respectively

I'm using FireFox v158, and Windows 11, however I'm sure that it would work the same on MacOS and Linux

[u/t31os]

An alternative, and i realise this also isn't ideal (but might be easier) is to the replace the generated thumbnail in your profile folder.

%localappdata%/Mozilla/Firefox/Profiles/your-profile-id-here/thumbnails

Find the image that refers to your shortcut and replace it with an image with the same name (but naturally with transparency).

Note: Replaced thumbnails likely won't show until restarting the browser.