BL web favicon for dark themes

marens · 2024-02-26 15:32:33

@johnraff

Now I know a little more about what you want.

I made a gray set of icons (circle and rounded - SVG 48x48).

I used solid backgrounds:
#101010 - Dark
#151515 - Middle
#202020 - Light

The flame is of course ututo's, I just set the saturation to 0 and I reduced the size a bit ( height / width ).

You can download them:
https://workupload.com/file/WWNV9trefGV

I hope you find what works for you.

* Or say for example:
Background blue - Flame red (* or any HEX color) and it will be done.

I like something else, but as I said:

marens wrote:

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

Last edited by marens (2024-02-27 12:18:34)

Döbbie03 · 2024-02-27 04:36:38

johnraff wrote:

^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...)

I completely agree, it was just me talking out loud. Which I do often

johnraff · 2024-03-10 09:58:39

I left this issue a couple of days in case anyone else wanted to add something, then other stuff intervened...

Anyway, thanks to everyone for input. Eventually I went back to inkscape and found out how to do a couple of basic operations.

The favicon (website and forum) now has a light grey circular background so it will be visible in any theme. The flame colour I left the same as the previous favicon.

The BL logo at the top of the page is an svg based on the existing image but colours and flame position adjusted with reference to: https://github.com/BunsenLabs/bunsen-im … e-grey.png A slightly lighter grey so it's now visible on a black background. Should be OK in light themes too.

Happy to tweak the colours if anyone suggests an improvement.

Last edited by johnraff (2024-03-10 10:00:06)

hhh · 2024-03-10 14:12:35

I had to clear my browser's cache to see the new favicon.

@johnraff, really nice work. Dealing with a 16x16px image with a curvy logo isn't easy. I love the new header logo, it's much more visible with dark themes. You used the proper 2 font weights, a detail I overlooked for the boron wallpapers.

Cheers!

marens · 2024-03-10 18:02:55

@johnraff

The favicon and BL logo at the top of the page now look good.
I checked the Crunchbang style and I think the gray logo is a good solution for the dark theme.

It usually annoys me when something breaks my css.
Today is different because I am also "guilty" of the changes.

Maybe it wouldn't be bad if the logo was refreshed every couple of years.
It is enough to change only the color.

I like the original @ututo's logo better, but the idea is the same:

johnraff · 2024-03-11 03:21:16

The favicon is automatically made from an svg file when the website code is rebuilt. I took the original dark-flame svg and eventually was able to add the round background. The favicon.ico is then made from that, by imagemagick. So ututo's curvy flame was already there, and I didn't touch it. I am surprised though, how cleanly it renders at the small 48px size of a favicon.

BTW the whole topic of a website's favicon is much more complicated than you might think:
https://medium.com/web-dev-survey-from- … 28bfc39918
The BL website has no reference to a favicon in the html at all. That may have been recommended best practice at some time in the past...

The new logo is also based on the previous svg file - I just moved the flame and recoloured the text, both trying to imitate the png file which @hhh found in bunsen-images-extra. The hardest bit was splitting the text object into parts so that the labs section could have a different colour.

Yes Ututo's original orange logo is nice too - it's still there on the website. The forum logo is basically the same file.

---
Next: I'd like to make a black crunchbang-like css style that will work on small screens.
Just recolouring one of the existing styles might be enough.
https://forums.bunsenlabs.org/viewtopic … 55#p129655

Last edited by johnraff (2024-03-11 03:24:09)

Döbbie03 · 2024-03-11 04:08:28

New favicon looks great. Good work team.

unklar · 2024-03-11 15:39:55

Dobbie03 wrote:

New favicon looks great. Good work team.

+1

Example vieb

johnraff · 2024-03-12 01:09:32

^off-topic, but @unklar is that a regular GitHub favicon I see on your browser panel? It's nice and visible on your dark theme while mine is all black.

Any idea why that is?

Döbbie03 · 2024-03-12 04:50:29

How come your guys ones are black? Mine are silver.

johnraff · 2024-03-12 06:07:17

^Yes it is odd. My GitHub icon in the firefox favourites toolbar is black and almost invisible, but the tab icon is white, as you'd want for a dark theme.

marens · 2024-03-12 15:11:13

^ This is from my userChrome.css:

/* GitHub - Custom Icon */

.toolbarbutton-icon[src*="github.com"],
.menu-iconic-icon[src*="github.com"],
.unified-nav-forward.menuitem-iconic.menuitem-with-favicon[uri*="https://github.com"] .menu-iconic-left,
.unified-nav-back.menuitem-iconic.menuitem-with-favicon[uri*="https://github.com"] .menu-iconic-left {
     filter: invert(1) !important;
}

#searchbar-engine-one-off-item-engine-4[image^="data:image/x-icon;base64,AAABAAIAEBAAAAEAIAAoBQAAJgAAACAgAAABACAAKBQAAE4"] .button-icon,
#urlbar-engine-one-off-item-engine-5[image^="data:image/x-icon;base64,AAABAAIAEBAAAAEAIAAoBQAAJgAAACAgAAABACAAKBQAAE4"] .button-icon {
     filter: invert(1) !important;
}

/* END GitHub - Custom Icon */

* Note
For #searchbar (engine-4) and #urlbar (engine-5) you need to preview the element using the developer tools.

EDIT

Another approach is possible, but it is a bit more complicated.
GitHub uses different icons.
We need an icon to use in CSS.

In my chrome folder, I have an images folder that contains a github.png icon:
https://postimg.cc/mhwQk7Yg

This icon looks good on a dark background.

/* GitHub - Custom Icon */

.toolbarbutton-icon[src*="github.com"],
.menu-iconic-icon[src*="github.com"] {
    background: url(images/github.png) !important;
    background-size: 16px 16px !important;
    background-repeat: no-repeat !important;
    padding-left: 16px !important;
}

.unified-nav-forward.menuitem-iconic.menuitem-with-favicon[uri*="https://github.com"] .menu-iconic-left,
.unified-nav-back.menuitem-iconic.menuitem-with-favicon[uri*="https://github.com"] .menu-iconic-left {
    list-style-image: none !important;
    width: 0 !important;
    background: url(images/github.png) !important;
    background-size: 16px 16px !important;
    background-repeat: no-repeat !important;
    padding-left: 16px !important;
}


#searchbar-engine-one-off-item-engine-4[image^="data:image/x-icon;base64,AAABAAIAEBAAAAEAIAAoBQAAJgAAACAgAAABACAAKBQAAE4"] .button-icon,
#urlbar-engine-one-off-item-engine-5[image^="data:image/x-icon;base64,AAABAAIAEBAAAAEAIAAoBQAAJgAAACAgAAABACAAKBQAAE4"] .button-icon {
    background: url(images/github.png) !important;
    background-size: 16px 16px !important;
    background-repeat: no-repeat !important;
    padding-left: 16px !important;
}

/* END GitHub - Custom Icon */

When GitHub changes the icons (data:image/x-icon;base64) we will have to change the code as well, but (unfortunately) this is nothing new for us.

Last edited by marens (2024-03-13 00:42:26)

johnraff · 2024-03-13 02:27:37

^@marens thanks! Your first fix (invert colours) did the job for me.
I didn't use the lower part - I don't use the searchbar, and never see icons in the urlbar...

ututo · 2024-03-17 02:24:13

Great work, guys!!! It looks so good!

marens · 2025-06-25 13:54:20

Off topic

johnraff wrote:

^@marens thanks! Your first fix (invert colours) did the job for me.
I didn't use the lower part - I don't use the searchbar, and never see icons in the urlbar...

Yesterday I received FF 140.0 after two months of waiting (FF 136.4).
CSS changed for popup menus.

The GitHub icon in the Firefox Favorites toolbar works fine, but if you have bookmarked any GitHub pages, you will get a dark icon.

Replace:

/* GitHub - Custom Icon */

.toolbarbutton-icon[src*="github.com"],
.menu-iconic-icon[src*="github.com"],
.unified-nav-forward.menuitem-iconic.menuitem-with-favicon[uri*="https://github.com"] .menu-iconic-left,
.unified-nav-back.menuitem-iconic.menuitem-with-favicon[uri*="https://github.com"] .menu-iconic-left {
     filter: invert(1) !important;
}

with:

/* GitHub - Custom Icon */

.toolbarbutton-icon[src*="github.com"],
.menu-icon[src*="github.com"],
.menu-iconic-left[src*="github.com"],
.unified-nav-forward.menuitem-iconic.menuitem-with-favicon[uri*="https://github.com"] .menu-icon,
.unified-nav-back.menuitem-iconic.menuitem-with-favicon[uri*="https://github.com"] .menu-icon {
     filter: invert(1) !important;
}

P.S.

johnraff wrote:

... and never see icons in the urlbar...

If you've added the GitHub search engine, when you type in the URL bar, the GitHub icon appears below (This time, serach with:) .

Last edited by marens (2025-06-25 22:24:20)

#21 2024-02-26 15:32:33

Re: BL web favicon for dark themes

#22 2024-02-27 04:36:38

Re: BL web favicon for dark themes

#23 2024-03-10 09:58:39

Re: BL web favicon for dark themes

#24 2024-03-10 14:12:35

Re: BL web favicon for dark themes

#25 2024-03-10 18:02:55

Re: BL web favicon for dark themes

#26 2024-03-11 03:21:16

Re: BL web favicon for dark themes

#27 2024-03-11 04:08:28

Re: BL web favicon for dark themes

#28 2024-03-11 15:39:55

Re: BL web favicon for dark themes

#29 2024-03-12 01:09:32

Re: BL web favicon for dark themes

#30 2024-03-12 04:50:29

Re: BL web favicon for dark themes

#31 2024-03-12 06:07:17

Re: BL web favicon for dark themes

#32 2024-03-12 15:11:13

Re: BL web favicon for dark themes

#33 2024-03-13 02:27:37

Re: BL web favicon for dark themes

#34 2024-03-17 02:24:13

Re: BL web favicon for dark themes

#35 2025-06-25 13:54:20

Re: BL web favicon for dark themes

Board footer