: How to make a large icon appear in Firefox's new tab Top Sites? In the latest stable release of Firefox (version 57), dubbed Quantum, the user controlled Top Sites feature on new tabs changed.

@Kristi941

Posted in: #Favicon #Firefox

In the latest stable release of Firefox (version 57), dubbed Quantum, the user controlled Top Sites feature on new tabs changed. Previously, only a crude thumbnail of a partial screenshot appeared regardless of website and could not be controlled. Now some websites appear with a large icon while others only show as the aforementioned thumbnail and their favicon overlaid in the corner. Example sites that get the large icon treatment: Amazon, TechCrunch, Slack, and GitHub. Example sites that get the thumbnail with favicon treatment: Slashdot, Steam, Kongregate, Gizmodo.

As far as I can tell, there isn't any particular rhyme or reason to this. I also haven't found any documentation anywhere on the Top Sites feature.



After digging into the Firefox source code for a while, I found browserextensionsactivity-streamlibTopSitesFeed.jsm, which has this section of code:

/**
* Get an image for the link preferring tippy top, rich favicon, screenshots.
*/
async _fetchIcon(link) {
// Check for tippy top icon and rich icon.
this._tippyTopProvider.processSite(link);
let hasTippyTop = !!link.tippyTopIcon;
let hasRichIcon = link.favicon && link.faviconSize >= MIN_FAVICON_SIZE;

if (!hasTippyTop && !hasRichIcon) {
this._requestRichIcon(link.url);
}

// Request a screenshot if needed.
if (!hasTippyTop && !hasRichIcon && !link.screenshot) {
const {url} = link;
await Screenshots.maybeCacheScreenshot(link, url, "screenshot",
screenshot => this.store.dispatch(ac.BroadcastToContent({
data: {screenshot, url},
type: at.SCREENSHOT_UPDATED
})));
}
}


Earlier, MIN_FAVICON_SIZE is defined as 96, which I assume is in pixels.

Looking at TippyTop, I see some preferential treatment being made for Amazon, Reddit, Twitter, Facebook, and some other websites (visit resource://activity-stream/data/content/tippytop/ inside Firefox for the relevant JSON file + images), which I guess means Firefox includes special icons with the final binaries for very specific websites, but not all of the sites I mentioned.

TechCrunch, for example, isn't in the TippyTop list and only has a 16x16 favicon. However, Firefox shows an icon instead of a screenshot. There are Apple touch icons on the TechCrunch website that exceed 96 pixels. So maybe one of those is being used instead. I generally think of favicons being separate entities from the Apple-specific touch icon meta tags. This means that webmasters can probably override the screenshot taking mechanism (somehow) and just show a nice icon in the Top Sites list. So the question still remains as to how to make that happen? The favicon logic at this point is still somewhat of a mystery.

Vote Up Vote Down

Login to post a comment!