Как сделать так, чтобы большой значок появлялся в новой вкладке Топ-сайтов Firefox?

13

В последней стабильной версии Firefox (версия 57), получившей название Quantum, пользовательские функции «Лучшие сайты» на новых вкладках изменены. Ранее, только грубый эскиз частичного скриншота появлялся независимо от веб-сайта и не мог контролироваться. Теперь некоторые веб-сайты отображаются с большим значком, в то время как другие отображаются только в виде вышеупомянутой миниатюры, а их значки отображаются в углу. Примеры сайтов, которые обрабатывают большие иконки: Amazon, TechCrunch, Slack и GitHub. Примеры сайтов, которые получают миниатюры с помощью лечения фавиконами: Slashdot, Steam, Kongregate, Gizmodo.

Насколько я могу судить, нет особой рифмы или причины для этого. Я также не нашел никакой документации нигде о функции Top Sites.

После того, как я некоторое время копался в исходном коде Firefox, я обнаружил browser\extensions\activity-stream\lib\TopSitesFeed.jsm, что в этом разделе кода:

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

Ранее MIN_FAVICON_SIZEопределялся как 96, который я предполагаю в пикселях.

Глядя на это TippyTop, я вижу некоторые преференциальные режимы для Amazon, Reddit, Twitter, Facebook и некоторых других веб-сайтов (посетите resource://activity-stream/data/content/tippytop/Firefox, чтобы найти соответствующий файл JSON + изображения), что, как я полагаю, означает, что Firefox включает специальные значки с окончательными двоичными файлами для конкретные сайты, но не все сайты, которые я упомянул.

Например, TechCrunch отсутствует в списке TippyTop и имеет только значок 16x16. Тем не менее, Firefox показывает значок вместо скриншота. На веб-сайте TechCrunch есть значки Apple Touch, размер которых превышает 96 пикселей. Так что, возможно, вместо этого используется один из них. Я обычно думаю, что значки - это отдельные объекты от мета-тегов сенсорных значков Apple. Это означает, что веб-мастера, возможно, могут каким-то образом переопределить механизм создания снимков экрана и просто отобразить красивый значок в списке самых популярных сайтов. Таким образом, остается вопрос, как это сделать? Логика favicon на данный момент все еще остается загадкой.

firefox favicon Кайл Бергер
источник
Это может быть то же самое для быстрого набора Opera.
Эндрю Лотт

Ответы:

7

После большого количества испытаний я смог заставить большие иконки работать на моем сайте (в Firefox 57.0.4).

Я думаю, что важно использовать большую (> 100px) иконку и указать размер:

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

Кроме того, Firefox, похоже, довольно агрессивно кеширует предварительный просмотр, поэтому мне нужно было использовать новый профиль, чтобы сразу увидеть изменения.

lw1.at
источник