How does the icon for Top Sites in the New Tab page is generated?
I am a developer and I would like to know how does Firefox generate the icons for "Top Sites" in the new tab page. I get a screenshot of my website with my favicon in the right lower corner as the image in the "Top Sites" section. I want only my favicon to be used instead. What type of images and link rel should I use?
Chosen solution
I'm fairly certain these are generated from Cookies, to remove these thumbnails:
Go to about:config, type it in your url bar, and press enter, promise to be careful, there is no warranty etc, and create a new boolean pref: browser.pagethumbnails.capturing_disabled and set it to true. You might need to restart the browser for this to have the intended effect.
Read this answer in context 👍 2All Replies (9)
Screen of the item in question? This is a End user help forum if you need more you might want to contact Mozilla as well.
Modified
Chosen Solution
I'm fairly certain these are generated from Cookies, to remove these thumbnails:
Go to about:config, type it in your url bar, and press enter, promise to be careful, there is no warranty etc, and create a new boolean pref: browser.pagethumbnails.capturing_disabled and set it to true. You might need to restart the browser for this to have the intended effect.
Mkll said
I'm fairly certain these are generated from Cookies, to remove these thumbnails: Go to about:config, type it in your url bar, and press enter, promise to be careful, there is no warranty etc, and create a new boolean pref: browser.pagethumbnails.capturing_disabled and set it to true. You might need to restart the browser for this to have the intended effect.
That did the trick! The image was cached and on removing the cache, it started reflecting the intended image!
Thanks!
In Fireox 59.02 the setting
browser.pagethumbnails.capturing_disabled
is not present
Though the question is simple.
In my firefox's top sites, I notice that Google shows an high resolution big colored G icon/PNG
so I went to their source code
I have noticed that in the google index HTML code we find <meta content="/images/branding/googleg/1x/googleg_standard_color_128dp.png" itemprop="image">
and in fact if you open https://www.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png
you see exactly the same big G that I see in my top sites, see attached screenshot
So the accepted solution looks like not pretty much pertinent with the original question
I have the same "problem"
I have tried to replicate the google's setup, but as you can see, the other top site in the attached screenshot, it doesn't work
I have the favicon shown in the lower right corner, in a SEPARATE small squared framework
why google website doesn't?
So i tried to clone their setup.
I have added the same png with the same meta tag but again I get a thumbnail preview of the home page instead.
How does this practically work?
Or in other words, why google DOESN'T show a preview of the google's home page and instead shows that big G?
PLEASE NOTE that the google card in the firefox top sites is NEITHER showing the separate lower left favicon squared framework
I'd like that my website, when listed in or added to the top sites, shows the same big icon
Thank you for the correct solution
Modified
This is ridiculous! Why aren't we allowed to set our own favicons????
browser.pagethumbnails.capturing_disabled is a hidden pref that doesn't exist by default and needs to be created via the right-click context menu (New > String).
You can open the about:config page via the location/address bar. You can accept the warning and click "I accept the risk!" to continue.
Hello cor-el,
I got your hint, but the question is
I have done nothing to get the huge whatsapp logo in my top sites
also for whatsapp, same behaviour as google, read my message above.
So what kindly do you mean?
I also went to history and rightclicked my website and clicked forget it
For what I understand, setting up that browser.pagethumbnails.capturing_disabled
I can countermove against the issue ... but why should we?
Anyway, the reply is partial, the question is
HOW SHOULD WE SETUP OUR WEBSITE FAVICON TO GET IT AS HUGE ICON IN THE FIREFOX HOME TOP SITES?
Se new attachment together with google, LinkedIn and Whatsapp and CroxyProxy do have their huge icons without webpage preview and without lower right frame
Thank you
Corsari said
In Fireox 59.02 the setting browser.pagethumbnails.capturing_disabled is not present Though the question is simple. In my firefox's top sites, I notice that Google shows an high resolution big colored G icon/PNG so I went to their source code I have noticed that in the google index HTML code we find <meta content="/images/branding/googleg/1x/googleg_standard_color_128dp.png" itemprop="image"> and in fact if you open https://www.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png you see exactly the same big G that I see in my top sites, see attached screenshot So the accepted solution looks like not pretty much pertinent with the original question I have the same "problem" I have tried to replicate the google's setup, but as you can see, the other top site in the attached screenshot, it doesn't work I have the favicon shown in the lower right corner, in a SEPARATE small squared framework why google website doesn't? So i tried to clone their setup. I have added the same png with the same meta tag but again I get a thumbnail preview of the home page instead. How does this practically work? Or in other words, why google DOESN'T show a preview of the google's home page and instead shows that big G? PLEASE NOTE that the google card in the firefox top sites is NEITHER showing the separate lower left favicon squared framework I'd like that my website, when listed in or added to the top sites, shows the same big icon Thank you for the correct solution
Try: <link rel="apple-touch-icon" href="your-touch-icon.png" />
New Tab Page was changed with Firefox 60 which was released on May 9th.
Locking this page to further discussion.