Page MenuHomePhabricator

Wikifunctions favicon has a white outline
Open, LowestPublicBUG REPORT

Assigned To
None
Authored By
DVrandecic
Jan 2 2023, 10:16 PM
Referenced Files
F57276798: image.png
Aug 16 2024, 1:12 PM
F57276796: image.png
Aug 16 2024, 1:12 PM
F57276816: image.png
Aug 16 2024, 1:12 PM
Unknown Object (File)
Aug 16 2024, 12:28 PM
Unknown Object (File)
Aug 16 2024, 12:28 PM
F57276758: Screenshot 2024-08-16 at 14.27.37.png
Aug 16 2024, 12:27 PM
F57276756: Screenshot 2024-08-16 at 14.25.22.png
Aug 16 2024, 12:27 PM
F53849387: image.png
May 19 2024, 5:46 PM

Description

Steps to replicate the issue (include links if applicable):

What happens?:
The favicon has a white outline

When using a dark system-theme:

2023-07-28_17-26.jpg (167×448 px, 11 KB)

2023-07-28_17-25.jpg (180×455 px, 12 KB)

When using Chrome on Windows with the default system and Chrome theme:

image.png (39×300 px, 2 KB)

What should have happened instead?:
Have a favicon without outline


See also: T343597: Wikifunctions favicon is too similar to Wikipedia favicon

Event Timeline

I've updated the description (mainly: it's only a problem in dark-mode browser/system themes) with new screenshots.
I'm not sure if the best solution is to either:

In general: Ask a UI and/or graphic designer.
The simplest fix is probably doing what Wikipedia does, too: Put the logo on a white background. The more complex one is having a logo that works well as favicon on either background (Like phabricator’s). This will be tricky since the "W" is pretty flimsy (Same for Wikipedia’s W, thus their solution, I guess).

btw.: afaic one can use CSS for the favicon, but only if the icon is SVG (and thus the CSS will be the SVG’s CSS)

Quiddity renamed this task from Wikifunctions favicon seems to have a white outline to Wikifunctions favicon issues - contrast and differentiation.Aug 3 2023, 9:00 PM
Quiddity updated the task description. (Show Details)

Suggest to split this in two issues just like one would do with a code-related issue. Solving that the outline looks bad has known fix (anti-aliasing and/or white background) whereas finding a favicon that looks less "W" like will be less trivial.

Quiddity renamed this task from Wikifunctions favicon issues - contrast and differentiation to Wikifunctions favicon has a white outline in dark browser UI.Aug 4 2023, 8:49 PM
Quiddity updated the task description. (Show Details)

@Simulo Thanks for the nudge. I've split them properly now. I (should) know better than to merge semi-related issues; I blame semi-exhaustion! :)

DVrandecic lowered the priority of this task from Low to Lowest.Mar 21 2024, 5:06 PM
DVrandecic moved this task from Needs Product/Design to Backlog on the Abstract Wikipedia team board.

Dark UI is not necessary. This is what it looks like on a tab in my Chrome with default UI:

image.png (32×32 px, 946 B)

Jack_who_built_the_house renamed this task from Wikifunctions favicon has a white outline in dark browser UI to Wikifunctions favicon has a white outline.May 19 2024, 5:46 PM
Jack_who_built_the_house updated the task description. (Show Details)

Do we have the source file for the icon? Getting rid of the white outline in favor for a white background should be easy.

Do we have the source file for the icon? Getting rid of the white outline in favor for a white background should be easy.

I believe the favicon should be reworked completely, see T343597#9811461.

I see the problems, but just flood-filling the background in white is a quick win.

This comment was removed by Simulo.

@DSmit-WMF It doesn't show me the last two – "File Not Attached" (you need to click "Attach file" in the "Referenced Files" list in the sidebar).

Have you considered reworking the favicon to keep only the lambda part (see the rationale in T343597#9811461)? The main problem of this logo is that it's hard to read. It's only readable as long as you have the white outline around the lambda (if the size of the format allows you):

image.png (583×609 px, 51 KB)

The areas I highlighted serve as a separator that allows the forms of λ and W be visually distinct. That white outline shouldn't scale down proportionally together with the image size – instead, it should scale down only as much to keep its function. If the white outline becomes so big in comparison that it "devours" much of the W, I hold that the only sound solution is to get rid of W.

Btw, I see the same problem with how it appears in Vector 2022 (on the right):

image.png (583×609 px, 51 KB)
image.png (65×243 px, 3 KB)