Mute tab icon.

  • Hello There. Can i somehow replace or disable "Mute tab audio" icon? Because this icon comes instead of the real tab icon and it is very annoying. TY!

  • There is a flags entry for this but at least on a standalone installation it doesn't have any effect if disabled or enabled it always shows the icon. I can't test on a "normal" install at the moment but you might try it yourself.

    go to vivaldi://flags/#enable-tab-audio-muting
    disable it and than restart vivaldi, hope it works for you

  • @zaibon Thanks for it, but it didn't help. Disabled or enabled mute icon comes anyway 😞

  • @ThingFromBelow said in Mute tab icon.:

    Hello There. Can i somehow replace or disable "Mute tab audio" icon? Because this icon comes instead of the real tab icon and it is very annoying. TY!

    Could you put up an image of what you mean by "mute tab audio" icon?

    If it's the little speaker icon that animates inside a tab when a video is playing, then

    .tab-audio {
      display:none !important;

    in your custom.css maybe enough.

    There's also a post mentioning that unticking Use Animation in vivaldi://settings/appearance/ would reduce CPU usage.

  • hi sorry to dig this thread, but i have the same problem, that i don't like the speaker icon on the tab, and the certain option in vivaldi://flags does not work.
    how to find custom.css on a Mac? thanks @aesouza

  • @joecole_1
    I might be wrong with this but as far as I know there isn't too much difference in the folder structure between the systems.
    Please correct me if this is not true!

    How to use custom css:

    1.) Go to the "About" page (vivaldi://about) to check the Vivaldi installation path.
    2.) Check the "Executable Path" entry. It should end with \Application\vivaldi.exe. Now close Vivaldi.
    3.) Navigate to that Application directory. It should contain a folder named after the current version of Vivaldi, like eg. 1.6.689.40
    4.) Open that folder and navigate to the following path: \resources\vivaldi\style
    5.) Edit the common.css file with a text editor and add the following code at the beginning of the file: @import "custom.css";
    6.) Use the text editor to create a new file in the same directory and name it custom.css. Make sure the extension of the file is actually .css and not .txt (or whatever the macOS equivalent is ^^)
    7.) Paste the CSS code to that file and save it. You can use that file from now on to paste other codes that you might find on this forum.
    8.) NOTE: Each time Vivaldi updates, you'll need to repeat steps 2 - 5 and copy your custom.css file to the new location.

    EDIT: This instruction was written by pafflick but I think that it explains the steps pretty good so I don't care about making a new one.

  • I have a problem with the "mute tab" function as well. It makes it harder to identify tabs, because it blocks the favicon, and I often misclick on the mute button when I want to switch tabs by mouse.

    I tried the above suggestions, but nothing helps my problems. The suggested custom.css only hides the button; I want to disable it completely. To me it's not useful at all, and only a nuisance. Do anyone know if the is possible in any way?

  • @holscher I have the same issue.

    I use the Automute Chrome extension to always keep tabs muted because I use lots of Microsoft Office 365 / OWA windows, and every time a meeting reminder or email arrives, I get every tab making noise.

    With the mute icon covering the favicon, I can't tell what tab is what.

    When I applied the custom.css suggestion, the mute icon goes away and I can see the site's favicon until I click the tab, then the favicon disappears and stays invisible for the duration of the browser's session.

    So essentially, I need all tabs muted unless I specifically unmute them, and I need the audio icon to not cover the favicon.

  • @sircasey It depends which OS you use. On osx the mute icon is on the right side, leaving the favicon untouched. If this is different on windows or linux, you can achieve this with custom css. Favicon right, audio left -- or audio right, favicon left. Shouldn't be hard to do.

  • I stumbled on this thread because i had a similar problem. I was able to disable the icon by adding this to my custom.css. It removes the icon, but you can still mute the tab by clicking where the icon should be. Prob not ideal, but works for my issue.

    .audioicon {
       display: none !important;

  • Here is what worked for me:

    .tab-audio {
       margin: -8px auto auto -6px;
       transform: scale(0.5);
    .favicon {
        transform: none !important;

    It displays the favicon all the time. If there is audio the icon is displayed in the corner at 50% of its normal size and is still clickable. if you want to disable the sound icon just change it to scale(0).

  • @m-e Changing the scale value seemed to have no effect.

  • what do you want to achieve? what do you set it do?

  • I believe I got it working so far by joining two of the lines from the code. This is to show favicon and to hide the mute icon completely. Credit goes fully to @m-e and @vredesbyrd

    I don't know how to post code like they did so I will describe...

    add @vredesbyrd code at the top and add only the second part "bottom" part from @m-e starting with .favicon... to the custom.css file described above.

    The extension I'm using to auto mute is called Mute Tabs By Url just in case this doesn't work with your mute extension if one is used.

  • You can write code if you add a few spaces in front of the line.

    The .tab-audio code is to not remove the functionality completely, but move it into the corner.
    "transform: scale(0);" should remove it completely

    .favicon part forces the display of the site icon.


Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.