Firefox – How Are Icons for ‘Top Sites’ in New Tab Rendered?

faviconfirefoxguiicons

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 ?

One row of top sites in the firefox new tab

Best Answer

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

  1. 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.

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

Related Question