In compact mode, Proton (v89) doesn't show favicons on muted tabs
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?
Chosen solution
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.
Read this answer in context 👍 0All Replies (2)
Chosen Solution
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.
Modified by pg_78
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.