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
.