12

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 browser\extensions\activity-stream\lib\TopSitesFeed.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.

  • This may be the same for Opera's Speed Dial. – Andrew Lott Jan 18 '18 at 21:16
7

After a lot of testing I was able to get large icons working for my website (in Firefox 57.0.4).

I think it is important to use a large (>100px) icon and specify the size:

<link rel="icon" type='image/png' sizes='256x256' href="/applogo_256.png"/>

In addition Firefox seems to cache the preview quite aggressively, so I needed to use a new Profile to see the change immediately.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.