Favicon is hard to see on dark backgrounds

[lutzky]

Switched my browser to a night-mode dark blue theme and... where did babybuddy go? Oh yeah, it's dark-blue-on-slightly-darker-blue. I don't have the know-how to do this neatly, especially with the smaller pixel sizes, but I'd advise:

• Easy, but would look very different: Make eyes, mouth and clock-hands white
• Hard, but would retain general aesthetic: Add a thin white border around the entire silhouette

[cdubz]

I think the favicon and icon both have too dark a color -- i.e. it has never been the "brand" color (which has no changed to be lighter as well). Can you add some screenshots of where you see it as bad now?

[lutzky]

Sure. For the favicon, see if you can spot it here (using this Chrome theme):

For the icon, frankly, right there in the header, the dark-blue-on-dark-grey seems low-contrast to me. Text is a slightly brighter blue, too.

[lutzky]

Header I was talking about:

Note how the word "baby" is brighter than the icon. For the contrast between the icon and the background, we get a constrast ratio of 1.4 (same page explains that the recommendation is at least 3).

[cdubz]

Those blues are different because you changed the blues 😛

If the icon used the new blue would it be passable? Or do we really need to do more here? Also, FTR, I think the icon blue has never been right, hah.

I need to dig up the original icon files...

[lutzky]

🤣 my memory is exactly as good as I remembered

Using the new blue would fix #297 (comment) but not #297 (comment). I think it should be done for consistency regardless, but while we're at it - add a white outline.

[cdubz]

Ok finally started working on this. There is a certain ghostly theme to the current iteration lol 👻

I may need to find/enlist some help from someone who actually knows how to work with SVG files...

[lutzky]

That's, uh, terrifying 😅 on a blue background, you'd see just the eyes, too. I'd drop the white eyes in favor of an outline around the whole shape.

[cdubz]

Thoughts on this? It has a very light white border --

[lutzky]

[squints]

Does it? The best test is "how would it fare on a background that happens to be the same color as the foreground", and my guess is that it would disappear.

[cdubz]

It does! Anything thicker really mashes up the details. The only other option that works, I think, would be to use a background with the image but I think that is the less attractive option --

[lutzky]

Here's what I had in mind - I made this in gimp starting with icon-brand.png - which, incidentally, is partially transparent! Is that on purpose? I fought it by duplicating the layer 4 times. (Border was added by adding another layer below, "alpha to selection" + grow selection by 2px.

Option 1:

Option 2:

[cdubz]

Haha yeah the current brand icon on master is a mess. I'm also updating these assets generally in #312 so there are better starting points there (including SVGs).

I'll give a thicker stroke a try again later. To me it seemed like it would look bad on dark backgrounds...

[lutzky]

Looks pretty good to me on Github Dark Mode.

[cdubz]

Yeah but at favicon size?

[lutzky]

Yeah, still looks good to me... I gather you don't like it. I'm not much of an artist 😅

[cdubz]

Haha me neither. The second one with filled in details look like it may work so I'll run a variant of that through a full test. There is also some way to handle different versions for dark/light mode but I'm unclear on that standard/how it integrates with browser usage of the favicon.

[cdubz]

Alright I fiddled with this a lot and didn't come up with a "works in all scenarios" version that I liked. I'm sticking with the updated theme blue and changing to an SVG icon (that does have a dark mode setting that browser may or may not use 🤷).