web-dev-qa-db-ja.com

Firefoxの新しいタブのトップサイトに大きなアイコンを表示する方法は？

Quantumと呼ばれるFirefoxの最新の安定版リリース（バージョン57）では、新しいタブのユーザーが制御するトップサイト機能が変更されました。以前は、Webサイトに関係なく、部分的なスクリーンショットの大まかなサムネイルのみが表示され、制御できませんでした。一部のWebサイトは大きなアイコンで表示されますが、他のWebサイトは前述のサムネイルとコーナーにオーバーレイされたファビコンとしてのみ表示されます。大きなアイコンの扱いを受けるサイトの例：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、およびその他のWebサイト（関連するJSONファイル+画像についてFirefox内のresource://activity-stream/data/content/tippytop/にアクセス）に対して優遇措置が行われていることがわかります。 Firefoxには、非常に特定のWebサイト用の最終的なバイナリを含む特別なアイコンが含まれていますが、私が言及したすべてのサイトではありません。

たとえば、TechCrunchはTippyTopリストに含まれておらず、16x16のファビコンしかありません。ただし、Firefoxではスクリーンショットの代わりにアイコンが表示されます。 TechCrunch Webサイトには、96ピクセルを超えるAppleタッチアイコンがあります。そのため、代わりにそれらの1つが使用されている可能性があります。私は通常、ファビコンはApple固有のタッチアイコンメタタグとは別のエンティティであると考えています。これは、おそらくウェブマスターがスクリーンショット取得メカニズムを（何らかの方法で）オーバーライドし、Top SitesリストにNiceアイコンを表示するだけであることを意味します。それで、どうやってそれを実現するかという疑問が残っていますか？この時点でのファビコンのロジックは、いささか謎のままです。

firefoxfavicon
12
Kyle Berger

多くのテストを行った後、私のウェブサイトで大きなアイコンを使用することができました（Firefox 57.0.4）。

大きな（> 100px）アイコンを使用してサイズを指定することが重要だと思います。

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

さらに、Firefoxはプレビューを非常に積極的にキャッシュするようであるため、変更をすぐに確認するには新しいプロファイルを使用する必要がありました。

7
lw1.at