Hilfe durchsuchen

Vorsicht vor Support-Betrug: Wir fordern Sie niemals auf, eine Nummer anzurufen, sie per SMS zu kontaktieren oder persönliche Daten preiszugeben. Bitte melden Sie verdächtige Aktivitäten über die Funktion „Missbrauch melden“.

Learn More

What controls top site icons from using "rich icons" or "default icons"?

  • 4 Antworten
  • 1 hat dieses Problem
  • 9 Aufrufe
  • Letzte Antwort von cor-el

more options

What controls the whether firefox 58 uses a default icon( little box with a letter) + the background image for the webpage or the nice big icons for top sites that I add to the top sites tool bar.

If you do an inspection of the underlying code for a top site with a default icon "a small box with a letter" along with a screen shot - this is what you will see:

<div class="screenshot active" style="background-image: url(&quot;data:image/png;.......greatly shortened for viewing........);"></div>
<div class="top-site-icon default-icon">p</div>

The code for the nice big icons like the one for amazon.com this is what you will see:

<div class="top-site-icon rich-icon" style="background-image: url(&quot;resource://activity-stream/data/content/tippytop/images/amazon@2x.png&quot;);"></div>

I had to do a restore on my system and lost some of my top sites - when I put them back in they reverted to "default-icon" never back to "rich-icon" some sites always go back to using "rich icons". What controls this? Is it a browser setting or a web page thing?

Geändert am von cor-el

Alle Antworten (4)

more options

Sorry the code wasn't added as pure text....

code for a default icon for paypal.com:

class="top-site-icon default-icon">p

code for amazon.com:

class="top-site-icon rich-icon" style="background-image: url("resource://activity-stream/data/content/tippytop/images/amazon@2x.png");"

more options

You need to change < to &lt; in order to avoid the forum eating your HTML.

Example 1: thumbnail image with site icon overlaid

<div class="tile" aria-hidden="true">   <span class="letter-fallback">u</span>   <div class="screenshot active" style="background-image: url("data:image/png;base64,**encoded-image-data**");"></div>   <div class="top-site-icon default-icon" style="background-image: url("data:image/png;base64,**encoded-image-data**");"></div> </div>

Example 2: built-in icon

<div class="tile" aria-hidden="true">   <span class="letter-fallback">y</span>   <div class="top-site-icon rich-icon" style="background-image: url("resource://activity-stream/data/content/tippytop/images/youtube-com@2x.png");"></div> </div>

The second one is a built-in image (resource:// address), I think so Firefox has something to show people who haven't filled the list with their own history. But it may still appear mixed in with your history instead of a thumbnail for that site.

I don't know if you can control which one Firefox uses. Interesting question.

more options

You can cover the whole tile with the site icon by injecting some custom style rules into the new tab page:

.top-sites-list .top-site-outer .default-icon {
  height: 100% !important;
  width: 100% !important;
  bottom: unset !important;
  offset-inline-end: unset !important;
}

However, the icon is small and centered; Firefox does not magically come up with larger artwork. So that's not a particularly appealing option in my eyes:

more options

See also:

  • resource://activity-stream/data/content/tippytop/top_sites.json
  • resource://activity-stream/data/content/tippytop/images/