Comment faire apparaître une grande icône dans le nouvel onglet Top Sites de Firefox?

13

Dans la dernière version stable de Firefox (version 57), baptisée Quantum, la fonctionnalité Top Sites contrôlée par l'utilisateur sur de nouveaux onglets a changé. Auparavant, seule une miniature grossière d'une capture d'écran partielle apparaissait quel que soit le site Web et ne pouvait pas être contrôlée. Maintenant, certains sites Web apparaissent avec une grande icône tandis que d'autres ne s'affichent que sous la forme de vignette susmentionnée et leur favicon superposé dans le coin. Exemples de sites bénéficiant du traitement des grandes icônes: Amazon, TechCrunch, Slack et GitHub. Exemples de sites qui obtiennent la vignette avec un traitement favicon: Slashdot, Steam, Kongregate, Gizmodo.

Pour autant que je sache, il n'y a pas de rime ou de raison particulière à cela. Je n'ai également trouvé aucune documentation sur la fonctionnalité Top Sites.


Après avoir creusé dans le code source de Firefox pendant un certain temps, j'ai trouvé browser\extensions\activity-stream\lib\TopSitesFeed.jsm, qui a cette section de 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
      })));
  }
}

Plus tôt, MIN_FAVICON_SIZEest défini comme 96, ce qui, je suppose, est en pixels.

En regardant TippyTop, je vois un traitement préférentiel pour Amazon, Reddit, Twitter, Facebook et d'autres sites Web (visitez l' resource://activity-stream/data/content/tippytop/intérieur de Firefox pour le fichier JSON + les images), ce qui signifie que Firefox inclut des icônes spéciales avec les binaires finaux pour très des sites Web spécifiques, mais pas tous les sites que j'ai mentionnés.

TechCrunch, par exemple, n'est pas dans la liste TippyTop et n'a qu'un favicon 16x16. Cependant, Firefox affiche une icône au lieu d'une capture d'écran. Le site Web de TechCrunch contient des icônes Apple Touch qui dépassent 96 pixels. Alors peut-être que l'un d'eux est utilisé à la place. Je pense généralement que les favicons sont des entités distinctes des balises META spécifiques aux icônes tactiles d'Apple. Cela signifie que les webmasters peuvent probablement remplacer le mécanisme de capture d'écran (d'une manière ou d'une autre) et afficher simplement une belle icône dans la liste des meilleurs sites. La question reste donc de savoir comment y parvenir? La logique du favicon à ce stade est encore quelque peu un mystère.

Kyle Berger
la source
Il peut en être de même pour la numérotation rapide d'Opera.
Andrew Lott

Réponses:

7

Après de nombreux tests, j'ai pu faire fonctionner de grandes icônes pour mon site Web (dans Firefox 57.0.4).

Je pense qu'il est important d'utiliser une grande icône (> 100px) et de spécifier la taille:

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

De plus, Firefox semble mettre en cache l'aperçu de manière assez agressive, j'ai donc dû utiliser un nouveau profil pour voir le changement immédiatement.

lw1.at
la source