Come far apparire una grande icona nella nuova scheda Top Sites di Firefox?


13

Nell'ultima versione stabile di Firefox (versione 57), soprannominata Quantum, la funzionalità Top Sites controllata dall'utente su nuove schede è cambiata. In precedenza, solo un'anteprima approssimativa di uno screenshot parziale appariva indipendentemente dal sito Web e non poteva essere controllata. Ora alcuni siti Web vengono visualizzati con un'icona di grandi dimensioni, mentre altri vengono visualizzati solo come anteprima di cui sopra e la loro favicon sovrapposta nell'angolo. Siti di esempio che ottengono il trattamento di icone di grandi dimensioni: Amazon, TechCrunch, Slack e GitHub. Siti di esempio che ottengono l'anteprima con il trattamento favicon: Slashdot, Steam, Kongregate, Gizmodo.

Per quanto ne so, non vi sono particolari rime o motivi per questo. Inoltre non ho trovato alcuna documentazione da nessuna parte sulla funzione Top Sites.


Dopo aver scavato nel codice sorgente di Firefox per un po ', ho trovato browser\extensions\activity-stream\lib\TopSitesFeed.jsm, che ha questa sezione di codice:

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

In precedenza, MIN_FAVICON_SIZEè definito come 96, che presumo sia in pixel.

Guardando TippyTop, vedo che viene fatto un trattamento preferenziale per Amazon, Reddit, Twitter, Facebook e alcuni altri siti Web (visita resource://activity-stream/data/content/tippytop/all'interno di Firefox per il file JSON + immagini pertinenti), che immagino significhi che Firefox include icone speciali con i binari finali per molto siti Web specifici, ma non tutti i siti che ho citato.

TechCrunch, ad esempio, non è nell'elenco TippyTop e ha solo una favicon 16x16. Tuttavia, Firefox mostra un'icona anziché uno screenshot. Sul sito Web TechCrunch sono presenti icone touch di Apple che superano i 96 pixel. Quindi forse uno di quelli viene utilizzato invece. In generale, penso che i favicon siano entità separate dai metatag delle icone touch specifici di Apple. Ciò significa che i webmaster possono probabilmente sostituire il meccanismo di acquisizione degli screenshot (in qualche modo) e mostrare semplicemente una bella icona nell'elenco dei siti principali. Quindi rimane la domanda su come farlo accadere? La logica favicon a questo punto è ancora in qualche modo un mistero.


Questo potrebbe essere lo stesso per la composizione rapida di Opera.
Andrew Lott,

Risposte:


7

Dopo molti test sono riuscito a far funzionare icone di grandi dimensioni per il mio sito Web (in Firefox 57.0.4).

Penso che sia importante utilizzare un'icona grande (> 100px) e specificare la dimensione:

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

Inoltre, Firefox sembra memorizzare l'anteprima in modo piuttosto aggressivo, quindi ho dovuto usare un nuovo profilo per vedere immediatamente la modifica.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.