How are the Icons for "top sites" in the firefox new tab rendered?

When I open a new tab in firefox, I get the top sites based on my history, or based on what I select to be shown.
One row from that list of top sites is shown here.
Some are simply rectangular (eg yahoo finance, lichess.org), while some are having a smaller rectangle at the bottom corner (eg google news, yahoo mail).
Some are simply the single starting letter (eg N), while some are having the relevant favicon (eg Y, whatsapp, lichess.org).

Why such inconsistent variety ?
Why firefox treats Different sites Differently ?

Prem

Posted 2018-09-14T19:21:38.230

Reputation: 221

Answers

Regarding the way Firefox generates Top Site previews, the MDN states:

A global "top sites" list is checked. This list is created by a Mozilla service called Tippy Top. The data store provided by Tippy Top includes an optimized icon for each of the sites in the list; if the site is on this list, that icon is used.

If Tippy Top doesn't include the site, Firefox looks in its Places data store for icons specified in the page's <head> element;

a. If an SVG icon is available, that icon is selected.

b. Otherwise, bitmapped icons which are at least 96 pixels wide are considered. If one is found to have a width of exactly 96 pixels, it is used. Otherwise, the smallest image larger than 96 pixels wide is selected.

c. If no high-resolution icon is found, a screenshot is taken of the site; this screenshot is then scaled and cropped to fit in the space allotted to the icon. If the site also has a favicon, it may be overlaid in the corner of the image.

The high resolution icons—also known as rich icons—are specified by setting the rel attribute to one of:

apple-touch-icon

apple-touch-icon-precomposed

fluid-icon

The size of each icon is taken from the size attribute specified on the <link>, if it's provided. apple-touch-icon and apple-touch-icon-precomposed icons with no size attribute are assumed to be the standard classic iPhone size of 57x57 pixels.

The icon closest in size to 96 pixels is selected. Firefox does its best to avoid having to scale the images, which can result in fuzzy or distorted images, especially at smaller sizes.

There's a note that helped me fix my issue with the large icon not displaying, which was caused by only having a favicon.ico despite it including sizes from 16x16 up to 256x256:

Note: Only "rich" icons (apple-touch-icon and fluid-icon) support the sizes attribute. You can't specify the size for rel="icon" using the sizes attribute.

Domi

Posted 2018-09-14T19:21:38.230

Reputation: 206

thanks for the correct answer ! – Prem – 2019-12-03T06:48:19.143

This appears to be based on the size of the favicon provided by the website. With a 48 x 48 pixel favicon I saw the small icon at the bottom but it changed to the larger one when I updated my favicon to 512 x 512 pixel png.

vkkodali

Posted 2018-09-14T19:21:38.230

Reputation: 111

+1 , thanks for the input; while it does not completely answer this question, it does give some possibilities to look into – Prem – 2018-11-06T19:20:49.037

Firefox uses the mobile device icons for websites to display the large icons, and these are set by the website designer/owner in the header (head section) of the website through meta tags -- originally intended for when you save/bookmark the website on a mobile device, to show as an app icon.

Why the Firefox development team decided this was the best way to represent websites, I'll never know. But the result is that websites that do not feature this mobile app icon are presented as a snapshot of the website, with the website's favicon in the lower right of the snapshot thumbnail.

So it all comes down to whether or not a website has been designed to show as an app in mobile use. Hope this helps to understand it -- even if it's a ridiculous design choice.

Kenoi

Posted 2018-09-14T19:21:38.230

Reputation: 11

Welcome to StackExchange ! Also, thanks for the nice answer which sounds right, but it would be great if you could provide some reference for that. – Prem – 2018-11-07T18:13:18.540

1Not sure how to do that with this interface, and seeing as I'm not aware of any detailed documentation Mozilla has released on the subject. I am a web developer with over a decade of working experience, so my knowledge of how websites are structured and practical insight would be the "reference". – Kenoi – 2018-11-08T01:16:33.550

I know what you mean, but currently there are two answers here and visitors to this question have no way to make out which is right. A web-link ( to some Documentation or to some source code comment ) would support answers. – Prem – 2018-11-08T04:45:08.220

I'm literally not allowed to comment on the other answer (and, personally, I already hate this platform). A PNG favicon with the 512 pixel size will not show properly on older web browsers, which expect an ICO file containing a 16, 32, and 48 pixel image of the icon, as has been the standard for a long-long time. See here for more context: https://en.wikipedia.org/wiki/Favicon

You will get better compatibility with a standard ICO favicon and the large PNG mobile (touch) icon defined in a meta tag.

– Kenoi – 2018-11-09T03:56:20.960