Hiding favicons when you have lots of tabs open to avoid visual clutter, but selectively showing them on pinned tabs, speed dial, etc

avanavana · 24 Dec 2024, 10:48

I chronically have too many tabs open, and I can't stand the sight of literally dozens (to hundreds) of favicons cluttering my field of vision at the top of the screen.

So I modded the CSS to hide favicons from tabs. I also removed the minimum width from tabs, since without the favicons they could get even slimmer. I selectively allowed some favicons to appear, depending on what they were (speed dial, for instance), so I could easily pick out key tabs (I do not want excess blank pages open, for example).

But this also had the effect of removing favicons on all tabs, even when there weren't very many open, including pinned tabs.

I was able to re-instate favicons on pinned tabs and tabs that are wider than 30px, as well as the aforementioned special tabs like speed dial tabs with the following CSS:

.tab {
  container-type: inline-size !important;
}

.tab-header .favicon {
  flex: 0 !important;
  min-width: auto !important;
}

.tab-position .tab.active .tab-header .favicon {
  overflow: visible;
}

.tab-header .favicon img {
  display: none;
}

.tab-position .tab .favicon {
  margin: 1px !important;
  padding: 0 !important;
}

.is-pinned .tab-header .favicon,
.is-pinned .tab-header .favicon:has(img[srcset^='http']),
.tab-header .favicon:has(img[srcset='/resources/favicon-speeddials@2x.png']) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.is-pinned .tab-header .favicon img,
.tab-header .favicon img[srcset^='http'],
.tab-header .favicon img[srcset='/resources/favicon-speeddials@2x.png'] {
  display: block !important;
  height: auto !important;
  width: 16px !important;
}

@container (min-width: 30px) {
  .tab-header .favicon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .tab-header .favicon img {
    display: block !important;
    height: auto !important;
    width: 16px !important;
  }
}

In case anyone finds it useful. I originally posted this in another forum here thinking it was a problem with Vivaldi because I forgot I had disabled favicons a long time ago and I thought I had also disabled custom CSS but it seems I didn't, and a user there suggested I post here as well for others to find.

PS: in case anyone wants to see how this looks:

Lots of tabs (but speed dial tabs identifiable)

Pinned tab and tabs over 30px in width: