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.
- Open Vivaldi with the flags:
--flag-switches-begin --debug-packed-apps --silent-debugger-extension-api --flag-switches-end
- Right click on one of your broken web panel favicons and select "inspect."
- 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 usinghttps://mail.google.com/
. - 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 ishttps://ssl.gstatic.com/ui/v1/icons/mail/images/favicon5.ico
- 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.
- 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.
- Open Vivaldi with the flags:
-
...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.
-
Thanks so much, this looks neat.
-
How do you open Vivaldi with the flags? Once I know how to do this step I think I'll be fine.
-
@almalexiel There was a change in the Chromium code that removed the flag for
debugging packed apps
.If you want to inspect the user interface(UI), check out this thread:
Guide | Inspecting the Vivaldi UI with DevTools -
This doesn't seem to work anymore in 3.8.2259.37. Might there be any way to fix the code?
-
@valiowk Looking for a solution either...
-
Just an update of the code because it seems that the one proposed here doesn't work since Vivaldi 3.8 :
@Ornorm said in Web Panel Icons in 3.8:
> @mreizinho
> Changeimg
byspan
in your code :[title~= "https://flipboard.com/"] > span {content: url("https://ssl.gstatic.com/ui/v1/icons/mail/images/favicon5.ico");}
Edit : better code to use (in order not to have the notification badge affected by the custom icon :
@ornorm said in Web Panel Icons in 3.8:
@mreizinho Please try this :
[title~= "https://www.messenger.com/"] > span:not(.button-badge) { content: url("https://www.dropbox.com/s/enwc1n4794q6sba/messenger4.png?dl=1"); }
(if you have other web panels that have a notification badge, please use the
span:not(.button-badge)
instead of the usualspan
in order to have the notification badge diplayed correctly ... or, easier, use that everytime)Edit : and don't forget to use the
transform: scale(X);
property if your icon is too big/too small (cfr my previous post) -
@herrschreiberbeivivaldi It really looks nice. Can you point me out to the icon set you are using on the sidebar?
-
@mreizinho Sure, I made the icons myself using Inkscape. I uploaded them here.
-
@ornorm How do I share the .ico file? I get the share link from dropbox and drive and can't get it to work.
-
Sadly this modification doesn't seem to work any more. Any ideas how to fix it?
-
@herrschreiberbeivivaldi
https://forum.vivaldi.net/post/135732
https://css-tricks.com/responsive-images-css/To clarify, I haven’t tried it. I changed the webpanel icon for Mastodon a while back, but I did it with Javascript. The code in the background has changed, the original solution can no longer work.