Site Logo: Dark transparent site logos are invisible

[jasmussen]

When you upload an image to a Site Logo block the first time, a square crop of that image is used also as your Site Icon. This is likely going to be somewhat common for white sites with black text logo types, such as this:

In that situation, the site icon becomes barely visible:

Let's ensure that the site logo always has the site background applied, so that the color the logo has been designed to rely on is applied for contrast:

Can just apply the background color to the img directly.

[courtneyr-dev]

Possibly related? https://wordpress.org/support/topic/gutenberg-dosent-work/

[jasmussen]

Seems likely, yes. One idea, add a circular dot behind any image, so there's always going to be something visible at least.

[richtabor]

It would be easy to add a white or light gray background, and that should do it, right?

What if we used the site's background color as the fallback? Probably would be better with the header template part's background even—though I'm not sure how possible that would be.

[jasmussen]

What if we used the site's background color as the fallback? Probably would be better with the header template part's background even—though I'm not sure how possible that would be.

That seems like it would be a great solution.

[mtias]

+1 for using the background of the site, in the same way the global styles card is created.

[talldan]

Something that might be considered in conjunction with this is the contrast of the favicon when a browser is in dark mode. This was my test of using a logo like the one in the issue description (1st and 3rd tabs are my WordPress site, and yes I do tend to have too many tabs open):

I wonder if there are any good options for helping users avoid that, like a preview of an example browser tab in the block inspector.

[mtias]

You could argue that showing the dark icon being illegible in the admin should already be a hint that you could run into problems. I wonder if we could render a notice or something if you upload a logo with transparency and use it for the site icon.

[aaronrobertshaw]

I've started looking into this one.

Adding a fallback background or gradient, following the global styles preview card, is pretty straightforward for the icon in the site editor. Things get trickier for the uses of the site icon in the post editor as it currently doesn't have access to the merged global styles.

Access to global styles data within the post editor is something that has been looked into a few times already (#47098, #34178, #34156, #46894). Unfortunately, for the moment we still cant access the global styles colors for the post editor's site icon.

Some possible options might be:

1. Proceed with using the global styles background color or gradient for the site editor's icon background
2. Apply an arbitrary icon background color for the site icon in the post editor
3. Leave the post editor's icon as is until we can access global styles in that editor
4. Revisit this once we can access global styles data in both editors

What are everyone's thoughts on the best way forward?

[mtias]

I think this is low priority and we can let it sit for a little bit.

[lukecarbis]

Is there any issue for just using the default WordPress logo in the menu instead of the site icon? If this were a setting somewhere, this issue could be lower priority. (That would also partially solve for bad logo crops)

I think adding a dark logo with transparent background is quite a common use case, and creates a very noticeable visual bug within a primary interaction. FWIW, I think the problem should be considered as a higher priority.

[aurooba]

Noting that I'm going to spin up a PR for this. :)

[aaronrobertshaw]

It's worth noting access to the merged global styles data in the post editor is in the process of being added for other features such as section styling and displaying inherited style values in the UI.

Perhaps, waiting for that to land will make achieving consistency for the site logo in both editors easier?