Bitcoin Logo/Icon Issues

[jarolrod]

Now that the Bitcoin logo/icon used with the GUI is currently facing a redesign thanks to @Bosch-0's work on #199, it's an appropriate time to discuss and potentially fix some issues with the logo. Here I document two issues that I have found: 1) Inconsistent Color, 2) Rough/Pixelated Edges.

A couple of notes:

• The icon used as for the New/Proposed Icon is taken from PR Added updated bitcoin PNG / SVG icon #199
• The icon used as the Current Icon is taken from the 0.21.0 Release

Inconsistent Color

Both the new proposed logo and the current logo appear in the GUI as a different color compared to their source. Looking at the RGB values shows that the Red and Blue values get shifted between the source and how it is represented in the GUI. There is a consistent 1 point shift down in the Green value. Tried my best to sample in the same place for all comparisons.

I suppose that the same color shifts occur with the Regtest, Testnet, and Signet Icons. I have not tested this.

The orange color between the current and new/proposed logo is different. I believe it would be beneficial to establish concrete colors and/or a color scheme for Bitcoin Core. With an established color scheme we can keep things consistent.

Current Logo Color Comparison

New Logo Color Comparision

Rough/Pixelated Edges

The Bitcoin logo as a PNG/ICO file that sits under src/qt/res looks completely fine on a HiDPI display. When one runs the GUI, it is apparent that the logo has rough edges that make it look abnormal. This indicates that the problem may not be with the icon/logo itself and instead with how it is painted.

Below are some screenshots of this problem:
SVG, PNG, and GUI Comparison
Note: The shadow effect used on the current logo makes the rough edges less obvious. It becomes more apparent on the new logo which doesn't have this shadow effect.

Proposed New Logo Splash Screen

Current Logo Splash Screen

System icon comparison with other icons
Note: Included comparisons with other application icons to highlight that this is a problem with the Bitcoin icon and not a system rendering issue.

[Bosch-0]

Inconsistent Color

The logo uses a slight gradient of 3 shades of orange starting with #FFA440 at the base, then #FFB040, and finally #FFB640 fyi - but yes seems the GUI is rendering the logo not how it should be. The original source from where I exported the PNG / SVG from is here > https://www.figma.com/file/0oqnohjahRtprjRyaetDOL/Bitcoin-Core-Design-System?node-id=1850%3A44

Rough/Pixelated Edges

I did not notice this when testing will try again though I was using a non HiDPI display

[RandyMcMillan]

Flat icon design is challenging... :)

Are you exporting the SVG at high dpi such as 512? 1024? 2048?

https://iconion.com/posts/flat-icons---what-is-a-flat-web-design-exactly-g.html

Apple's guidelines are still useful when targeting multiple platforms (I'm my experience)
https://developer.apple.com/design/human-interface-guidelines/macos/icons-and-images/app-icon/

It is better to start with a larger canvas (even with SVGs) and reduce the dimensions to fit.

[Rspigler]

@Bosch-0 any update?

[Bosch-0]

Seems to me it's more of an issue with Qt rather than the logo I've uploaded. #199 (comment) may be a solution?

[Zakonduasabbat]

Wow