How are the Icons for "top sites" in the firefox new tab rendered?
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
relattribute to one of:
apple-touch-iconapple-touch-icon-precomposedfluid-iconThe size of each icon is taken from the
sizeattribute specified on the<link>, if it's provided.apple-touch-iconandapple-touch-icon-precomposedicons with nosizeattribute 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-iconandfluid-icon) support thesizesattribute. You can't specify the size forrel="icon"using thesizesattribute.