Jak sprawić, by duża ikona pojawiła się w nowej zakładce Firefox Najpopularniejsze strony?

13

W najnowszej stabilnej wersji Firefoksa (wersja 57), nazwanej Quantum, zmieniono kontrolowaną przez użytkownika funkcję Top Sites na nowych kartach. Wcześniej niezależnie od strony internetowej pojawiała się tylko przybliżona miniatura częściowego zrzutu ekranu i nie można jej było kontrolować. Teraz niektóre witryny mają dużą ikonę, podczas gdy inne pokazują się tylko jako wspomniana miniatura, a ich favicon jest nałożony w rogu. Przykładowe witryny, które korzystają z dużych ikon: Amazon, TechCrunch, Slack i GitHub. Przykładowe strony, które otrzymują miniaturę z obróbką favicon: Slashdot, Steam, Kongregate, Gizmodo.

O ile mi wiadomo, nie ma w tym żadnego szczególnego rymu ani powodu. Nie znalazłem też nigdzie żadnej dokumentacji funkcji Top Sites.


Po pewnym czasie zagłębiania się w kod źródłowy Firefoksa, znalazłem browser\extensions\activity-stream\lib\TopSitesFeed.jsm, który ma tę sekcję kodu:

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

Wcześniej MIN_FAVICON_SIZEjest zdefiniowany jako 96, który, jak zakładam, jest wyrażony w pikselach.

Patrząc na TippyTop, widzę preferencyjne traktowanie Amazon, Reddit, Twitter, Facebook i niektórych innych stron internetowych (odwiedź resource://activity-stream/data/content/tippytop/w Firefoksie odpowiedni plik JSON + obrazy), co, jak sądzę, oznacza, że ​​Firefox zawiera specjalne ikony z końcowymi plikami binarnymi dla bardzo konkretnych witryn, ale nie wszystkich wymienionych przeze mnie witryn.

Na przykład TechCrunch nie znajduje się na liście TippyTop i ma tylko ikonę 16 x 16. Jednak Firefox wyświetla ikonę zamiast zrzutu ekranu. W witrynie TechCrunch znajdują się ikony Apple touch, które przekraczają 96 pikseli. Więc może jeden z nich jest używany zamiast tego. Ogólnie myślę, że favikony są oddzielnymi bytami od metatagów ikony dotykowej specyficznych dla Apple. Oznacza to, że webmasterzy mogą prawdopodobnie zastąpić mechanizm robienia zrzutów ekranu (jakoś) i po prostu pokazać ładną ikonę na liście Top Sites. Pozostaje więc pytanie, jak to zrobić? Logika favicon w tym momencie jest nadal nieco tajemnicą.

Kyle Berger
źródło
Może być tak samo w przypadku szybkiego wybierania w Operze.
Andrew Lott,

Odpowiedzi:

7

Po wielu testach udało mi się uzyskać duże ikony działające na mojej stronie (w przeglądarce Firefox 57.0.4).

Myślę, że ważne jest użycie dużej (> 100 pikseli) ikony i określenie rozmiaru:

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

Ponadto Firefox wydaje się dość agresywnie buforować podgląd, więc musiałem użyć nowego profilu, aby natychmiast zobaczyć zmianę.

lw1.at
źródło