Na última versão estável do Firefox (versão 57), apelidada Quantum, o recurso Top Sites controlado pelo usuário em novas guias foi alterado. Anteriormente, apenas uma miniatura bruta de uma captura de tela parcial aparecia independentemente do site e não podia ser controlada. Agora, alguns sites aparecem com um ícone grande, enquanto outros são exibidos apenas como a miniatura mencionada acima e seu favicon sobreposto no canto. Exemplos de sites que recebem o tratamento de ícones grandes: Amazon, TechCrunch, Slack e GitHub. Exemplos de sites que recebem a miniatura com tratamento favicon: Slashdot, Steam, Kongregate, Gizmodo.
Tanto quanto posso dizer, não há nenhuma rima ou razão específica para isso. Também não encontrei nenhuma documentação em nenhum lugar no recurso Top Sites.
Depois de pesquisar um pouco o código fonte do Firefox, descobri browser\extensions\activity-stream\lib\TopSitesFeed.jsm, que tem esta seção 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_SIZEé definido como 96, que eu assumo é em pixels.
Observando TippyTop, vejo algum tratamento preferencial sendo feito para Amazon, Reddit, Twitter, Facebook e alguns outros sites (visite o resource://activity-stream/data/content/tippytop/Firefox para obter o arquivo JSON + imagens relevantes), o que eu acho que significa que o Firefox inclui ícones especiais com os binários finais por muito tempo. sites específicos, mas nem todos os sites que mencionei.
O TechCrunch, por exemplo, não está na lista TippyTop e só possui um favicon 16x16. No entanto, o Firefox mostra um ícone em vez de uma captura de tela. Existem ícones da Apple touch no site do TechCrunch que excedem 96 pixels. Talvez um desses esteja sendo usado. Geralmente, penso que os favicons são entidades separadas das metatags de ícones de toque específicos da Apple. Isso significa que os webmasters provavelmente podem substituir o mecanismo de captura de tela (de alguma forma) e apenas mostrar um bom ícone na lista Sites principais. Então a questão ainda permanece sobre como fazer isso acontecer? A lógica favicon neste momento ainda é um pouco misteriosa.
Respostas:
Após muitos testes, consegui que ícones grandes funcionassem no meu site (no Firefox 57.0.4).
Eu acho que é importante usar um ícone grande (> 100px) e especificar o tamanho:
Além disso, o Firefox parece armazenar em cache a visualização de forma bastante agressiva, então eu precisava usar um novo perfil para ver a alteração imediatamente.
fonte