¿Cómo hacer que un ícono grande aparezca en la nueva pestaña de Sitios principales de Firefox?

13

En la última versión estable de Firefox (versión 57), denominada Quantum, la función de Sitios Principales controlada por el usuario en las nuevas pestañas cambió. Anteriormente, solo aparecía una miniatura cruda de una captura de pantalla parcial independientemente del sitio web y no se podía controlar. Ahora, algunos sitios web aparecen con un ícono grande, mientras que otros solo se muestran como la miniatura mencionada anteriormente y su favicon superpuesto en la esquina. Sitios de ejemplo que reciben el tratamiento de iconos grandes: Amazon, TechCrunch, Slack y GitHub. Sitios de ejemplo que obtienen la miniatura con tratamiento de favicon: Slashdot, Steam, Kongregate, Gizmodo.

Por lo que puedo decir, no hay ninguna rima o razón particular para esto. Tampoco he encontrado ninguna documentación en ninguna parte sobre la función Sitios principales.

Después de profundizar en el código fuente de Firefox por un tiempo, encontré browser\extensions\activity-stream\lib\TopSitesFeed.jsmque tiene esta sección de código:

/**
 * 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
      })));
  }
}

Anteriormente, MIN_FAVICON_SIZEse define como 96, que supongo que está en píxeles.

Mirando TippyTop, veo que se está haciendo un tratamiento preferencial para Amazon, Reddit, Twitter, Facebook y algunos otros sitios web (visite resource://activity-stream/data/content/tippytop/dentro de Firefox para el archivo JSON + imágenes relevantes), lo que supongo que significa que Firefox incluye iconos especiales con los binarios finales para muy sitios web específicos, pero no todos los sitios que mencioné.

TechCrunch, por ejemplo, no está en la lista TippyTop y solo tiene un favicon de 16x16. Sin embargo, Firefox muestra un icono en lugar de una captura de pantalla. Hay íconos táctiles de Apple en el sitio web TechCrunch que exceden los 96 píxeles. Entonces, tal vez se esté utilizando uno de esos. Generalmente pienso en los favicons como entidades separadas de las metaetiquetas de íconos táctiles específicos de Apple. Esto significa que los webmasters probablemente puedan anular el mecanismo de captura de pantalla (de alguna manera) y solo mostrar un buen icono en la lista de Sitios principales. ¿Entonces la pregunta sigue siendo cómo hacer que eso suceda? La lógica del favicon en este punto sigue siendo un misterio.

firefox favicon Kyle Berger
fuente
Esto puede ser lo mismo para Speed ​​Dial de Opera.
Andrew Lott el

Respuestas:

7

Después de muchas pruebas pude hacer que grandes iconos funcionaran para mi sitio web (en Firefox 57.0.4).

Creo que es importante usar un ícono grande (> 100 px) y especificar el tamaño:

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

Además, Firefox parece almacenar en caché la vista previa de forma bastante agresiva, por lo que necesitaba usar un nuevo perfil para ver el cambio de inmediato.

lw1.at
fuente