Firefoxの新しいタブの「トップサイト」のアイコンはどのようにレンダリングされますか？
Firefoxで新しいタブを開くと、履歴に基づいて、または表示するために選択した内容に基づいて、上位のサイトが表示されます。
トップサイトのリストから1行がここに表示されます。
一部は単純に長方形（yahoo Finance、lichess.orgなど）ですが、一部は下隅にある小さい長方形（例：グーグルニュース、ヤフーメール）。
一部は単に単一の開始文字（例：N）ですが、一部は関連する favicon（例：Y、whatsapp、lichess.org）。
なぜそのような一貫性のない多様性？
Firefoxが異なるサイトを異なる方法で処理する理由
Firefoxがトップサイトのプレビューを生成する方法に関して、MDN states ：
- グローバルな「トップサイト」リストがチェックされます。このリストは、 Tippy Top というMozillaサービスによって作成されます。 Tippy Topが提供するデータストアには、リスト内の各サイト用に最適化されたアイコンが含まれています。サイトがこのリストにある場合は、そのアイコンが使用されます。
Tippy Topにサイトが含まれていない場合、FirefoxはPlacesデータストアでページの
<head>要素で指定されたアイコンを探します。a。 SVGアイコンが使用可能な場合は、そのアイコンが選択されます。
b。それ以外の場合は、幅が96ピクセル以上のビットマップアイコンが考慮されます。幅が正確に96ピクセルであることが判明した場合は、それが使用されます。それ以外の場合は、幅が96ピクセルを超える最小の画像が選択されます。
c。高解像度のアイコンが見つからない場合は、サイトのスクリーンショットが撮られます。次に、このスクリーンショットは、アイコンに割り当てられたスペースに収まるように拡大縮小およびトリミングされます。サイトにファビコンもある場合は、画像の隅にオーバーレイされることがあります。
高解像度アイコン（リッチアイコンとも呼ばれます）は、
rel属性を次のいずれかに設定することで指定されます。
Apple-touch-iconApple-touch-icon-precomposedfluid-icon各アイコンのサイズは、指定されている場合は
<link>で指定されたsize属性から取得されます。size属性のないApple-touch-iconおよびApple-touch-icon-precomposedアイコンは、57x57ピクセルの標準的なクラシックiPhoneサイズであると見なされます。96ピクセルに最も近いサイズのアイコンが選択されます。 Firefoxは、特に小さいサイズで画像がぼやけたり歪んだりする可能性がある画像を拡大縮小する必要がないように最善を尽くします。
大きなアイコンが表示されないという問題を修正するのに役立つメモがあります。これは、16x16から256x256までのサイズが含まれているにもかかわらずfavicon.icoしかないことが原因でした。
注：「リッチ」アイコン（
Apple-touch-iconおよびfluid-icon）のみがsizes属性をサポートします。sizes属性を使用してrel="icon"のサイズを指定することはできません。
これは、Webサイトで提供されているファビコンのサイズに基づいているようです。 48 x 48ピクセルのファビコンでは、下部に小さなアイコンが表示されていましたが、ファビコンを512 x 512ピクセルのpngに更新すると、大きなアイコンに変わりました。
Firefoxは、ウェブサイトのモバイルデバイスアイコンを使用して大きなアイコンを表示します。これらは、ウェブサイトのデザイナー/所有者がメタタグを介してウェブサイトのヘッダー（ヘッドセクション）に設定します。元々は、ウェブサイトを保存/ブックマークするときに使用します。アプリアイコンとして表示するモバイルデバイス。
Firefox開発チームがこれがWebサイトを表すための最良の方法であると判断した理由は、私にはわかりません。ただし、その結果、このモバイルアプリアイコンを備えていないWebサイトは、Webサイトのスナップショットとして表示され、スナップショットサムネイルの右下にWebサイトのファビコンが表示されます。
つまり、ウェブサイトがモバイルで使用するアプリとして表示されるように設計されているかどうかにかかっています。これがそれを理解するのに役立つことを願っています-たとえそれがばかげたデザインの選択であったとしても。