Как сделать так, чтобы большой значок появлялся в новой вкладке Топ-сайтов 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 на данный момент все еще остается загадкой.


Это может быть то же самое для быстрого набора Opera.
— Эндрю Лотт

Ответы:


7

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

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

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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.