BL web favicon for dark themes

ututo · 2024-02-23 21:28:28

Hello fellow nixers,

-- First of all, I apologize if this is not the right place to post this. Mods are free to move/delete it. --

I use a dark theme (Crunchbang) for the BL website and I notice that the favicon displayed is dark too. (See image)

I was wondering if it's possible to make it dynamically adapt to bright or dark themes. Or else, apply a new favicon that looks good regardless of the web browser theme. (see mockup with original, plain white, outline and rounded favicons)

I must admit that the bl flame is a tricky one for a favicon.

Anyways, I know this is just an aesthetic issue, not a problem at all.
So, I would like to read what do you guys think about it. Do you use light or dark themes?

marens · 2024-02-24 01:41:04

ututo wrote:

Anyways, I know this is just an aesthetic issue, not a problem at all.
So, I would like to read what do you guys think about it. Do you use light or dark themes?

We had a similar post:
https://forums.bunsenlabs.org/viewtopic.php?id=8684

I don't mind the Hydrogen style although I like the dark theme.

You noticed well that the logo doesn't look logical with the Crunchbang style.
I agree.
You solved it easily (screenshot 2).

I haven't tried it, but I would change this part of the Crunchbang style (lines 279-282):

.logo {
  width: 300px;
  margin: 20px 0 10px 0;
}

with:

.logo {
  width: 300px;
  margin: 20px 0 10px 0;
  filter: invert(1);
}

Of course, the moderators of the site will make the decision.

johnraff · 2024-02-24 02:34:17

@ututo thanks for bringing this up (and this is the best place for it).

So there are two items to discuss:
1) the logo that appears at the top of forum pages
2) the favicon that a browser shows on a tab, or favourite in a menu

Both are almost invisible with dark themes, and both have been bothering me for some time.

For 2) I was playing with simply adding a grey circle behind the dark flame in the icon. That would be enough to make it visible on both dark and light themes. I ran into issues with my total incompetence using inkscape, so set it aside until I had time to study up. Meanwhile, if another user felt like making a replacement favicon, that would of course be very welcome! (@ututo?) I can very easily add it to the website code. (It wants an .svg image, which is converted to .png when the site is built.)
EDIT: @ututo I now see your "rounded" icon which is almost what I was trying to make. Maybe a light grey circle would be softer looking, and visible on white or black backgrounds?

For 1) It looks to me (without actually trying) that @marens' css suggestion ought to work if applied to a new dark css theme based on Crunchbang colours. (The last time I was coding css there was no such property as filter )
EDIT: @marens I just tried your css filter on a BL forum page via firefox's code inspector, and it works perfectly. That should be added to the Crunchbang (and any other dark theme) css, whatever else happens.

Unfortunately we can't just make Crunchbang the default as it is because of layout issues on small screens: https://forums.bunsenlabs.org/viewtopic … 55#p129655

Last edited by johnraff (2024-02-24 02:42:36)

marens · 2024-02-24 03:16:51

johnraff wrote:

@marens I just tried your css filter on a BL forum page via firefox's code inspector, and it works perfectly. That should be added to the Crunchbang (and any other dark theme) css, whatever else happens.

I saw this at the last minute.
I have already prepared a new post where I gave you advice to try anyway.

Last edited by marens (2024-02-24 03:26:29)

johnraff · 2024-02-24 05:00:40

So that's issue 1) fixed anyway, thanks @marens!
Adding it to the forum code means directly editing the forum software on the server, so I'll need a couple of days to make sure it's done cleanly.

marens · 2024-02-24 12:25:55

^ I've been using a customized favicon in userChrome.css for a long time.

You can see it in my old screenshots:
https://forums.bunsenlabs.org/viewtopic … 57#p129557

I forget, but I probably used @utut's original logo as a base.
I just changed the color of the flame a bit.

It is a PNG image 180x180.
You can easily resize the image to 16x16.

* Right click on the image > Save Image As...

Last edited by marens (2024-02-24 13:24:50)

ututo · 2024-02-24 16:26:07

Okay. I was playing with Inkscape and I think I have found the solution to the favicon problem.

Following your suggestions (thank you @johnraff / @marens) I think it looks pretty good on both light and dark themes of a few web browsers I tested.

this is the result:

The idea is to use a neutral colour for the flame. So, I have applied a gray ( RGB #9598a2 ) colour and increased the thickness of the bunsenlabs logo.

it's a 32x32 .svg file. You can find it in my github [link]

Döbbie03 · 2024-02-24 18:29:19

I use this add-on in Firefox. Doesn't change the favicon in the bookmarks, just on the tab.

https://addons.mozilla.org/en-GB/firefo … ustomizer/

marens · 2024-02-24 18:36:54

@ututo

Yes.
It looks very nice.

ututo wrote:

Okay. I was playing with Inkscape ...

Same here.
I made bl-favicon_circle1.svg and bl-favicon-circle2.svg.

Of course I used your logo for the flame.
https://workupload.com/file/kFzxQPDvxaK

I like to add a little color to tabs and menus.

johnraff · 2024-02-25 06:03:01

Thanks to @ututo and @marens!

At first, like marens, I was looking at adding a circle background to make the flame visible, but ututo's grey flame looks nice in both light and dark themes, so let's use that. The neutral grey should not clash with any user's colour scheme.

EDIT: only one thing, @ututo I wonder if you could make a 48x48 version of that flame? That's the size of the current image. I know it's not that important for svg images, but just to keep changes to a minimum.

EDIT2: Sorry, but I've just hit an issue. The grey icon is fine with either light or dark backgrounds, but of course it becomes less visible on a grey background, as I have in the Firefox active tab. I imagine grey backgrounds will exist here and there on other peoples' machines.

I think we'll need to add a background to the flame in order to guarantee it will be visible anywhere. I guess a circle would be the least annoying shape?

Colours? Existing black on grey background? Grey on black or white background?

Here's how ututo's grey flame looks on my active tab:

And marens' bl-favicon-circle2:

Last edited by johnraff (2024-02-27 02:52:53)

Döbbie03 · 2024-02-25 06:58:02

What I did back in AL days was to use a blue AL logo. It stood out quite nicely on both light and dark themes.

The yellow one or a variation of the colour @marens uses would be nice I suppose?

hhh · 2024-02-25 08:36:45

I'll recolor this, choose the hex code...

https://github.com/BunsenLabs/bunsen-im … /flame.svg

I'd love if we used this updated branding as a replacement the forum header, choose the hex code...

https://github.com/BunsenLabs/bunsen-im … e-grey.png

Works with a light background as well...

https://raw.githubusercontent.com/Bunse … e-grey.png

This would work "as is" for the favicon?

https://linuxrocks.online/system/accoun … 063981.png

Robi · 2024-02-25 13:45:00

Waterfox / FF with extension Color Changer may help locally for the time being.
BL Display Style: Crunchbang in Nyxt (left) as well.

Last edited by Robi (2024-02-25 13:49:08)

ututo · 2024-02-25 15:34:45

I can do a 48x48, no problem.
I really like the @marens' concept with the circle background.
We should reach an agreement on what colours to use. Some people like b&w, some grey, some teal blue, etc.
I, for example, don't like the yellow one, but I've to admit that colour would outstand on every tab, plus it will be consistent with the BL Home webpage design.

Maybe bunsenlabs should have a distinct colour branding like openSUSE or ubuntu do. Somthing like that would be cool...idk.

Anyways, I will play with some circle and square mockups and show them to you

marens · 2024-02-25 16:34:34

I agree with @ututo.

It is impossible to please everyone.
Tastes are different and that cannot be changed.

Today I created two new BL favicons (SVG 48x48) with a transparent (10%) yellow background.
One is a circle and the other with rounded corners.
I think they look good:

You can download them here:
https://workupload.com/file/VRzxs5FzkXL

I will stop here because there is no reason to continue.

ututo wrote:

Some people like b&w, some grey, some teal blue, etc.

Last edited by marens (2024-02-25 16:54:11)

johnraff · 2024-02-26 05:37:00

ututo wrote:

I really like the @marens' concept with the circle background.

That's the only way to guarantee the favicon will be visible anywhere.

We should reach an agreement on what colours to use. Some people like b&w, some grey, some teal blue, etc.
I, for example, don't like the yellow one, but I've to admit that colour would outstand on every tab, plus it will be consistent with the BL Home webpage design.

I'm not fond of that yellow either (nor on the home page for that matter) so there's two of us, but other people seem to like it.

marens wrote:

It is impossible to please everyone.
Tastes are different and that cannot be changed.

This. We just have to try to minimize the annoyance...

Today I created two new BL favicons (SVG 48x48) with a transparent (10%) yellow background.
One is a circle and the other with rounded corners.

Thanks! Personally, I think I prefer a complete circle, but maybe that means the flame has to be smaller? Rounded corners is an interesting idea too.

Matching the favicon with the website colours makes sense, and I certainly don't feel like doing a complete graphics makeover of the home page right now, so that's an argument for that sickly yellow...

@Robi we're really looking for a server-side fix here, but that Color Changer looks useful anyway.
---

hhh wrote:

I'd love if we used this updated branding as a replacement the forum header, choose the hex code...
https://github.com/BunsenLabs/bunsen-im … e-grey.png

Ah I see that's not only a different colour but also the flame is coming from the candlestick 'l'.
If that's visible on - and doesn't clash with - all the available forum styles, then substituting that one image file would be just as easy a fix for the forum header visibility as the css colour-reverse line for dark themes.

Döbbie03 · 2024-02-26 05:38:38

I don't like the yellow either, but a flame sometimes is yellow so it sort of ties in.

Maybe we need a major colour used in the default wallpaper as the flame colour?

johnraff · 2024-02-26 07:17:50

^That's a thought too - change the favicon colour each release to match the main desktop colour? It wouldn't be that hard.
(Restyling the whole website front page to match eg Boron-dark would be an order of magnitude more work though.)

Döbbie03 · 2024-02-26 07:36:10

A cool idea to match the website colours to the colourscheme of the OS.

johnraff · 2024-02-26 08:29:59

^Very appealing, but I think it might be more work than it's worth. The website looks fairly nice as it is (despite that yellow...)

Last edited by johnraff (2024-02-26 08:37:20)

#1 2024-02-23 21:28:28

BL web favicon for dark themes

#2 2024-02-24 01:41:04

Re: BL web favicon for dark themes

#3 2024-02-24 02:34:17

Re: BL web favicon for dark themes

#4 2024-02-24 03:16:51

Re: BL web favicon for dark themes

#5 2024-02-24 05:00:40

Re: BL web favicon for dark themes

#6 2024-02-24 12:25:55

Re: BL web favicon for dark themes

#7 2024-02-24 16:26:07

Re: BL web favicon for dark themes

#8 2024-02-24 18:29:19

Re: BL web favicon for dark themes

#9 2024-02-24 18:36:54

Re: BL web favicon for dark themes

#10 2024-02-25 06:03:01

Re: BL web favicon for dark themes

#11 2024-02-25 06:58:02

Re: BL web favicon for dark themes

#12 2024-02-25 08:36:45

Re: BL web favicon for dark themes

#13 2024-02-25 13:45:00

Re: BL web favicon for dark themes

#14 2024-02-25 15:34:45

Re: BL web favicon for dark themes

#15 2024-02-25 16:34:34

Re: BL web favicon for dark themes

#16 2024-02-26 05:37:00

Re: BL web favicon for dark themes

#17 2024-02-26 05:38:38

Re: BL web favicon for dark themes

#18 2024-02-26 07:17:50

Re: BL web favicon for dark themes

#19 2024-02-26 07:36:10

Re: BL web favicon for dark themes

#20 2024-02-26 08:29:59

Re: BL web favicon for dark themes

Board footer