web-dev-qa-db-fra.com

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

Dans la dernière version stable de Firefox (version 57), surnommée Quantum, la fonctionnalité Top Sites contrôlée par l'utilisateur sur les nouveaux onglets a été modifiée. 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. À présent, certains sites Web apparaissent avec une grande icône, tandis que d'autres apparaissent uniquement sous la forme de la 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. Exemple de sites qui obtiennent la vignette avec le traitement favicon: Slashdot, Steam, Kongregate, Gizmodo.

Autant que je sache, il n'y a pas de rime ou de raison particulière à cela. De plus, je n'ai trouvé aucune documentation dans la fonctionnalité Sites Top.

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

Auparavant, MIN_FAVICON_SIZE est défini par 96, ce qui, je suppose, est en pixels.

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

TechCrunch, par exemple, ne figure 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. Il y a Apple icônes tactiles sur le site Web TechCrunch qui dépassent 96 pixels. Alors peut-être que l'un de ceux-ci est utilisé à la place. Je pense généralement que les favicons sont des entités distinctes des méta-tags d’icône tactile spécifiques à Apple. Cela signifie que les webmasters peuvent probablement remplacer (en quelque sorte) le mécanisme de prise de capture d'écran et simplement afficher une icône Nice dans la liste Top Sites. La question reste donc de savoir comment y parvenir. La logique de favicon à ce stade est encore un peu mystérieuse.

firefoxfavicon
12
Kyle Berger

Après de nombreux tests, j'ai pu obtenir 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 (> 100 pixels) et de spécifier la taille:

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

De plus, Firefox semble mettre la prévisualisation en cache de manière assez agressive. Je devais donc utiliser un nouveau profil pour voir le changement immédiatement.

7
lw1.at