Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was closed and archived. Please ask a new question if you need help.

How does the icon for Top Sites in the New Tab page is generated?

more options

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?

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 👍 2

All Replies (9)

more options

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 by WestEnd

more options

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.

more options

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!

more options

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 by Corsari

more options

This is ridiculous! Why aren't we allowed to set our own favicons????

more options

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.

more options

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

more options

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" />

more options

New Tab Page was changed with Firefox 60 which was released on May 9th.

Locking this page to further discussion.