Làm cách nào để làm cho một biểu tượng lớn xuất hiện trong tab Trang web mới của Firefox?


13

Trong bản phát hành ổn định mới nhất của Firefox (phiên bản 57), được đặt tên là Quantum, tính năng Trang web hàng đầu do người dùng kiểm soát trên các tab mới đã thay đổi. Trước đây, chỉ có một hình thu nhỏ thô của ảnh chụp màn hình một phần xuất hiện bất kể trang web và không thể kiểm soát được. Bây giờ một số trang web xuất hiện với một biểu tượng lớn trong khi những trang web khác chỉ hiển thị dưới dạng hình thu nhỏ đã nói ở trên và hình đại diện của chúng được đặt ở góc. Các trang web ví dụ được xử lý biểu tượng lớn: Amazon, TechCrunch, Slack và GitHub. Ví dụ các trang web có được hình thu nhỏ với xử lý favicon: Slashdot, Steam, Kongregate, Gizmodo.

Theo như tôi có thể nói, không có bất kỳ vần điệu hay lý do cụ thể nào cho việc này. Tôi cũng không tìm thấy bất kỳ tài liệu nào ở bất cứ đâu trên tính năng Trang web hàng đầu.


Sau khi đào sâu vào mã nguồn Firefox một lúc, tôi thấy browser\extensions\activity-stream\lib\TopSitesFeed.jsm, trong đó có phần mã này:

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

Trước đó, MIN_FAVICON_SIZEđược định nghĩa là 96, mà tôi giả sử là bằng pixel.

Nhìn vào TippyTop, tôi thấy một số ưu đãi được thực hiện cho Amazon, Reddit, Twitter, Facebook và một số trang web khác (truy cập resource://activity-stream/data/content/tippytop/vào Firefox để xem tệp + hình ảnh JSON có liên quan), mà tôi đoán có nghĩa là Firefox bao gồm các biểu tượng đặc biệt với các nhị phân cuối cùng cho các trang web cụ thể, nhưng không phải tất cả các trang web tôi đã đề cập.

Ví dụ, TechCrunch không có trong danh sách TippyTop và chỉ có favicon 16x16. Tuy nhiên, Firefox hiển thị một biểu tượng thay vì ảnh chụp màn hình. Có các biểu tượng cảm ứng của Apple trên trang web TechCrunch vượt quá 96 pixel. Vì vậy, có thể một trong số đó đang được sử dụng thay thế. Tôi thường nghĩ rằng favicon là các thực thể riêng biệt với các thẻ meta biểu tượng cảm ứng dành riêng cho Apple. Điều này có nghĩa là các quản trị web có thể ghi đè lên cơ chế chụp ảnh màn hình (bằng cách nào đó) và chỉ hiển thị một biểu tượng đẹp trong danh sách Trang web hàng đầu. Vì vậy, câu hỏi vẫn còn là làm thế nào để thực hiện điều đó? Logic favicon vào thời điểm này vẫn còn là một bí ẩn.


Điều này có thể giống với Quay số nhanh của Opera.
Andrew Lott

Câu trả lời:


7

Sau rất nhiều thử nghiệm, tôi đã có thể có được các biểu tượng lớn hoạt động cho trang web của mình (trong Firefox 57.0.4).

Tôi nghĩ điều quan trọng là sử dụng biểu tượng lớn (> 100px) và chỉ định kích thước:

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

Ngoài ra, Firefox dường như lưu trữ bộ xem trước khá tích cực, vì vậy tôi cần sử dụng Hồ sơ mới để thấy sự thay đổi ngay lập tức.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.