I'm trying to change thumbnails of Top Sites on the NewTab page of Firefox 68, because it shows favicons on some tiles and sites' screenshots on other tiles, this looks non uniform. As I understand, it uses the logic: if favicon is large enough, then it is used for the tile, if it is small and should be stretched, then screenshot is used instead and small favicon is placed in the SE corner of the tile. I'd like to get more coherent behavior: all tiles use icons, or all tiles use screenshots (preferable).
I am aware of tiles' preference button in the NE corner of the tile. It gives an opportunity to set arbitrary image for the tile. But it wouldn't allow to use any local image. I tried using file:/// protocol, with different amount of slashes but without success, always received an error about invalid URL. It seems that only http(s):// protocol is considered as valid. But this option looks stupid for me: why should I store my thumbnails somewhere in the Web?
Firefox makes screenshots of frequently visited pages and stores them in cache folder in thumbnails subfolder. I used userContent.css to change thumbnails in pre-Quantum Firefox. This could be done by using proper selector and overriding of background-image with direct link to local file. Or, alternatively, it was possible to use internal protocol moz-page-thumb://. For example, moz-page-thumb://thumbnail/?url=http%3A%2F%2Faskubuntu.com link showed where the actual screenshot for AskUbuntu site should be placed if it was missing.
I found CSS selector for the tile in Firefox Quantum:

a.top-site-button[href*="askubuntu.com"] .top-site-icon.rich-icon

But it also won't allow me to use local links. moz-page-thumb:// protocol don't work as before and shows me "Invalid URL" error. background-image value for the thumbnail now reads something like blob:null/abcdabcd-1234-5678-9012-... and really points to a screenshot file, but this link type is dynamic and changes on every session, that's why I cannot use it permanently.
So is there any way to customize these thumbnails' icons in Quantum?

P.S. I don't like to use additional extensions, because I'm already using userContent.css.

1 Answer 1


I found a way to use custom images as thumbnails. Make a folder thumbnails in your chrome folder, where userContent.css is located. Put screenshots of the desired sites there. You can take some ready images from thumbnails folder in the cache of your Firefox or make them by yourself. Add this code to userContent.css:

@-moz-document url('about:newtab') {
  a.top-site-button[href*="superuser.com"] .top-site-icon.rich-icon {
    background-image: url(thumbnails/superuser.png) !important;

Change href part and file name of the thumbnail file for the desired site as needed. Use no file:/// prefix before the filename, and path should be relative to userContent.css location.

If you wish to achieve the opposite goal -- replace screenshots with the icons -- then you should prepare the icons (make them square, or they'll be cropped) and add the code to userContent.css:

@-moz-document url('about:newtab') {
  a.top-site-button[href*="superuser.com"] .screenshot.active {
    background-image: url(thumbnails/superuser_icon.png) !important;

And a closing word. This works fine in Firefox 68, but in newer versions you should also activate toolkit.legacyUserProfileCustomizations.stylesheets option in about:config to make custom css work -- it is disabled by default now.

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.