Firefoxの新しいタブトップサイトに大きなアイコンを表示するにはどうすればよいですか?


13

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サイト(resource://activity-stream/data/content/tippytop/関連するJSONファイル+画像についてはFirefox内をご覧ください)に対して優遇措置が行われていることがわかります。特定のウェブサイト、しかし私が言及したすべてのサイトではありません。

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


これはOperaのスピードダイヤルでも同じかもしれません。
アンドリューロット

回答:


7

多くのテストを行った後、私のウェブサイトで大きなアイコンを機能させることができました(Firefox 57.0.4)。

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

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

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.