☰

Firefox 新标签页中的“热门网站”图标是如何呈现的？

tag-icon • tag-icon firefox icons gui favicon
Firefox 新标签页中的“热门网站”图标是如何呈现的？

当我在 Firefox 中打开新标签时，我会根据我的历史记录或根据我选择显示的内容获得热门网站。
此处显示了该热门网站列表中的一行。
有些只是矩形的（例如雅虎财经、lichess.org），而有些则较小的矩形在底部角落（例如谷歌新闻、雅虎邮箱）。
有些只是单个起始字母（例如 N），而有些则具有相关的网站图标（例如 Y、whatsapp、lichess.org）。

为什么会有如此不一致的品种？
为什么 Firefox 对不同的网站有不同的处理方式？

Firefox 新标签页中一排热门网站

答案1

关于 Firefox 生成热门网站预览的方式，MDN状态：

  1. 检查全球“热门网站”列表。此列表由 Mozilla 服务创建，名为蒂皮托普Tippy Top 提供的数据存储包含列表中的每个站点的优化图标；如果该站点在此列表中，则使用该图标。

  2. 如果 Tippy Top 不包含该网站，Firefox 会在其 Places 数据存储中查找页面<head>元素中指定的图标；

    a. 如果有 SVG 图标可用，则选择该图标。

    b. 否则，将考虑宽度至少为 96 像素的位图图标。如果发现某个图标的宽度正好为 96 像素，则使用该图标。否则，将选择宽度大于 96 像素的最小图像。

    c. 如果找不到高分辨率图标，则截取网站的屏幕截图；然后缩放并裁剪此屏幕截图以适合分配给图标的空间。如果网站还有网站图标，则可能会将其覆盖在图像的一角。

高分辨率图标（也称为丰富图标）通过将属性设置rel为以下之一来指定：

  • apple-touch-icon
  • apple-touch-icon-precomposed
  • fluid-icon

如果提供了，则 每个图标的大小均取自size上指定的属性。没有属性的图标被认为是标准的经典 iPhone 尺寸，即 57x57 像素。<link>apple-touch-iconapple-touch-icon-precomposedsize

选定尺寸最接近 96 像素的图标。Firefox 会尽力避免缩放图像，因为缩放会导致图像模糊或扭曲，尤其是在尺寸较小的情况下。

有一个注释帮助我解决了大图标无法显示的问题，这是由于只有一个 favicon.ico 造成的，尽管它包括从 16x16 到 256x256 的尺寸：

笔记：只有“丰富”图标（apple-touch-icon和fluid-icon）支持该 属性。您无法指定使用该 属性的sizes尺寸。rel="icon"sizes

答案2

这似乎是基于网站提供的图标大小。使用 48 x 48 像素的图标时，我看到底部有一个小图标，但当我将图标更新为 512 x 512 像素 png 时，它变成了较大的图标。

答案3

Firefox 使用移动设备图标来显示网站大图标，这些图标由网站设计者/所有者通过元标记在网站的标题（头部部分）中设置 - 最初用于当您在移动设备上保存/收藏网站时，显示为应用程序图标。

我永远不知道 Firefox 开发团队为何认为这是呈现网站的最佳方式。但结果是，没有此移动应用图标的网站将以网站快照的形式呈现，网站的图标位于快照缩略图的右下角。

所以，这一切都取决于网站是否设计为可在移动设备上使用的应用程序。希望这有助于理解这一点——即使这是一个荒谬的设计选择。

相关内容