Force your web panels to display their favicons



  • If you use web panels I'm sure you've noticed that some of them don't always remember their favicons after opening a new session. Using a tiny bit of custom css, you can force Vivaldi to display a favicon for your web panels that are missing theirs.

    1. Open Vivaldi with the flags: --flag-switches-begin --debug-packed-apps --silent-debugger-extension-api --flag-switches-end
    2. Right click on one of your broken web panel favicons and select "inspect."
    3. Every button on the panel is a button element, but they're each given a unique title attribute, even the web panels. This is how you're going to target them. Find the relevant <button title for your web panel, it should include the url for the page it opens. In this example, I will be using https://mail.google.com/.
    4. Now that you've got the web panel's title, open it up and let the favicon load. Now, in the developer tools, the img src attribute for your web panel should have filled with a url, it is the location of the favicon. Copy that url. In my case it is https://ssl.gstatic.com/ui/v1/icons/mail/images/favicon5.ico
    5. Open up your custom.css, if you don't have one of those already, here's a helpful guide that should explain everything you need to know.
    6. Paste this into your custom.css
      [title~='Your web panel's title goes here'] > img {content: url('Your favicon's url goes here);}
      e.g.
      [title~='https://mail.google.com/'] > img {content: url('https://ssl.gstatic.com/ui/v1/icons/mail/images/favicon5.ico');}

    Repeat steps 2-6 for every web panel with a broken favicon you have. After this, your browser should start up with the proper favicons for your web panels.


  • Moderator

    @Tiamarth

    ...huh. I wasn't aware that content: could be used in something other for ::before and ::after pseudo-elements. (Or perhaps I learned it and forgot.) Useful to know for Vivaldi styling, albeit not usable for websites yet. (Testing shows it working in current Chrome and Safari, but not Firefox. The feature doesn't seem to have made it to candidate recommendation status yet, although it's been in working draft status since 2003.)

    The 2016 draft says an alt value after a slash is required for images, analogous to how alt attributes are required for HTML img tags, but no browser appears to understand that "/" syntax yet.

    References:
    http://stackoverflow.com/questions/11173991/content-attribute-of-img-elements
    https://www.w3.org/TR/css-content-3/



  • An added bonus to this approach is that you can load any favicon you want. If you got a site with an ugly favicon you just give it a new one.



  • @Isildur I only just learned of it the other day myself. As I understand it this can, in fact, only work in Chromium. I can't even think of very many use cases for it, but it certainly allowed me to do this more quickly than other methods would have.


Log in to reply
 

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