Bagaimana cara membuat ikon besar muncul di tab baru Firefox Situs Teratas?

13

Dalam rilis stabil terbaru Firefox (versi 57), dijuluki Quantum, fitur yang dikontrol pengguna Situs Top pada tab baru berubah. Sebelumnya, hanya thumbnail kasar tangkapan layar sebagian yang muncul terlepas dari situs web dan tidak dapat dikontrol. Sekarang beberapa situs web muncul dengan ikon besar sementara yang lain hanya tampil sebagai gambar mini yang disebutkan di atas dan favicon mereka di-overlay di sudut. Contoh situs yang mendapatkan perawatan ikon besar: Amazon, TechCrunch, Slack, dan GitHub. Contoh situs yang mendapatkan thumbnail dengan perlakuan favicon: Slashdot, Steam, Kongregate, Gizmodo.

Sejauh yang saya tahu, tidak ada sajak atau alasan khusus untuk ini. Saya juga belum menemukan dokumentasi di mana pun di fitur Top Sites.

Setelah menggali ke dalam kode sumber Firefox untuk sementara waktu, saya menemukan browser\extensions\activity-stream\lib\TopSitesFeed.jsm, yang memiliki bagian kode ini:

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

Sebelumnya, MIN_FAVICON_SIZEdidefinisikan sebagai 96, yang saya asumsikan dalam piksel.

Melihat TippyTop, saya melihat beberapa perlakuan istimewa yang dibuat untuk Amazon, Reddit, Twitter, Facebook, dan beberapa situs web lainnya (kunjungi resource://activity-stream/data/content/tippytop/di dalam Firefox untuk file + gambar JSON yang relevan), yang saya kira berarti Firefox menyertakan ikon khusus dengan binari akhir untuk sangat situs web tertentu, tetapi tidak semua situs yang saya sebutkan.

TechCrunch, misalnya, tidak ada dalam daftar TippyTop dan hanya memiliki favicon 16x16. Namun, Firefox menunjukkan ikon alih-alih tangkapan layar. Ada ikon Apple touch di situs web TechCrunch yang melebihi 96 piksel. Jadi mungkin salah satu dari mereka sedang digunakan sebagai gantinya. Saya biasanya menganggap favicons sebagai entitas yang terpisah dari meta tag ikon sentuh khusus Apple. Ini berarti bahwa webmaster mungkin dapat mengganti mekanisme pengambilan tangkapan layar (entah bagaimana) dan hanya menampilkan ikon yang bagus di daftar Situs Teratas. Jadi pertanyaannya tetap bagaimana cara mewujudkannya? Logika favicon pada saat ini masih agak misteri.

firefox favicon Kyle Berger
sumber
Ini mungkin sama untuk Panggilan Cepat Opera.
Andrew Lott

Jawaban:

7

Setelah banyak pengujian saya bisa mendapatkan ikon besar berfungsi untuk situs web saya (di Firefox 57.0.4).

Saya pikir penting untuk menggunakan ikon besar (> 100px) dan tentukan ukurannya:

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

Selain itu Firefox tampaknya melakukan cache pratinjau cukup agresif, jadi saya perlu menggunakan Profil baru untuk melihat perubahan segera.

lw1.at
sumber