Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Èròjà atẹ̀lélànà yii ni a ti fi pamọ́ fọ́jọ́ pípẹ́. Jọ̀wọ́ béèrè ìbéèrè titun bí o bá nílò ìrànwọ́.

In compact mode, Proton (v89) doesn't show favicons on muted tabs

  • 2 àwọn èsì
  • 1 ní ìṣòro yìí
  • 23 views
  • Èsì tí ó kẹ́hìn lọ́wọ́ cor-el

more options

With the new Proton UI, if you're in compact mode, then muted tabs don't show the favicon (the icon at the left hand side of the tab which represents the website). It's replaced by the mute icon, making it harder to distinguish different tabs visually. See the example in the screenshot.

Is it possible to bring the favicon back?

With the new Proton UI, if you're in compact mode, then muted tabs don't show the favicon (the icon at the left hand side of the tab which represents the website). It's replaced by the mute icon, making it harder to distinguish different tabs visually. See the example in the screenshot. Is it possible to bring the favicon back?
Ìsopọ̀ yíyà aṣàfihàn

Ọ̀nà àbáyọ tí a yàn

I was able to get what I wanted using userChrome.css. Here's how you can bring the favicon back...

  .tab-content .tab-icon-image {
    opacity: 1.0 !important;
  }

Now, that looks a bit messy because the favicon has a smaller and not so distinct mute icon on top of it. My approach to this - warning, it won't suit everyone - was to hide the mute icon, and to use the bottom border of the tab to show when a tab is muted or not. My tabs are all muted by default, so I want the *unmuted* tabs to stand out, using a red line at the bottom of the tab. Many people would instead want the *muted* tabs to stand out, in which case you could just replace "tab:not([muted])" with "tab[muted]" in the second part of the code below:

  tab[muted] .tab-icon-overlay {
    display: none !important;
  }

  tab:not([muted]) .tab-background {
    border-bottom-width: 2px !important;
    border-bottom-style: solid !important;
    border-bottom-color: orangered !important;
  }

The screenshot shows an example. Here I've unmuted the middle tab, and left the other two muted.

Ka ìdáhùn ni ìṣètò kíkà 👍 0

All Replies (2)

more options

Ọ̀nà àbáyọ Tí a Yàn

I was able to get what I wanted using userChrome.css. Here's how you can bring the favicon back...

  .tab-content .tab-icon-image {
    opacity: 1.0 !important;
  }

Now, that looks a bit messy because the favicon has a smaller and not so distinct mute icon on top of it. My approach to this - warning, it won't suit everyone - was to hide the mute icon, and to use the bottom border of the tab to show when a tab is muted or not. My tabs are all muted by default, so I want the *unmuted* tabs to stand out, using a red line at the bottom of the tab. Many people would instead want the *muted* tabs to stand out, in which case you could just replace "tab:not([muted])" with "tab[muted]" in the second part of the code below:

  tab[muted] .tab-icon-overlay {
    display: none !important;
  }

  tab:not([muted]) .tab-background {
    border-bottom-width: 2px !important;
    border-bottom-style: solid !important;
    border-bottom-color: orangered !important;
  }

The screenshot shows an example. Here I've unmuted the middle tab, and left the other two muted.

Ti ṣàtúnṣe nípa pg_78

more options

Note that this is affected by the Density settings you can select on the Customize page. In Compact mode you only see the sound playing icon and not the website favicon. In Normal mode you see the favicon by default and the sound playing icon on hover, there is a secondary line that shows the 'playing' or 'muted' state since the icon is hidden by default.