[F] Program Icon

[BsNoSi]

Expected behaviour

A clearly visible icon with a positive mood on the Windows taskbar (black in my case) that conveys an impression of the program that is opened with it.

I made one for me as replacement (assigned with program properties). It works fine for me:

QONotes-ico.zip

I like orange as an icon color - that's a matter of taste, of course. I can also create it in a different color on request, as well as a variant for light taskbars/backgrounds (orange is a good choice for both).

Actual behaviour

On my computer, the current default icon is a black square with an almost unrecognizable cloud icon (?) in a white frame. This is neither descriptive nor particularly appealing to me.

Steps to reproduce

Start program on a Windows system with a dark taskbar.

Relevant log output in the Log panel

Expand

[08:22:52] [debug] updatePanelMenu - 'updatePanelMenu'

Information about the application, settings and environment

Expand

QOwnNotes Debug Information

General Info

Current Date: Fr Nov 1 08:23:00 2024
Version: 24.10.5
Build date: Oct 30 2024
Build number: 1136
Platform: windows (windows)
Operating System: Windows 10 Version 2009
Build architecture: x86_64
Current architecture: x86_64
Release: GitHub Actions
Qt Version (build): 5.15.2
Qt Version (runtime): 5.15.2
Portable mode: no
Settings path / key:

[pbek]

Thank you for your suggestion.
A rebranding is a major step, and I fear, takes a lot more than putting an Icon in a file. 😅
Think all repositories of https://www.qownnotes.org/getting-started/overview.html, multiple sizes of icons in vector and pixel graphic, dark/light mode icons, all screenshots, documentation webpage, web API, web application, browser extension, CLI application, and much, much more. 😉

[BsNoSi]

My idea is a “quick fix” for me. For me, the current icon is not recognizable. To promote things, it is helpful if there is something “iconic” to identify them.

All the screenshots shown in “Overview” show a square with no really recognizable program icon in the top left.
Even with the icon at the top left of the documentation page, you have to look very closely to recognize a cloud icon in a square with a bent corner.

There is no need for a completely new icon, if that is, what you mean. But even the one used should be visible regardless of the background.

I have no experience with qt, but maybe there is an “invert” option for icons that can handle it if there is an icon with a transparent background. Perfect would be vector graphics support for all that (black/white, invert, colorize) → quick examples:

[pbek]

Your grayscale versions don't even look bad. 👍️
But I need SVGs...
Hmmm, I guess I need to play around with https://github.com/pbek/QOwnNotes/blob/main/icons/icon.svg in Inkscape. 🤔

[BsNoSi]

🤦 I did not save my version.

Made a BW-version of yours (which contained some irritating elements, not shure, if this is a "must have" for qt icons (let me know…).

A second version:

I am not sure if it is possible to invert icons with qt. The following icon for black/dark background looks a bit strange here (white lines on white background):

[pbek]

Thank you, I need to find a way to make the stroke of the cloud wider (it is almost not visible in small sizes). It doesn't seem that's so easy on the path of the cloud. 🤔

[BsNoSi]

White of black version (or both)? → I can do that for you (if you want).

[pbek]

Thank you. First only on the "white".

[BsNoSi]

Black:

White (invisible here):

White grey (only grey visible):

Black grey:

[pbek]

Thank you, I'll play around with those.

[pbek]

I think for the application icon we need an icon that works both on light and dark backgrounds. So no transparency for the application icon.

For the tray icon in dark mode it should be ok to have transparencies, because the user can select the dark icon.

[pbek]

Meanwhile, I created a script to generate the icons for the whole project based on icons/icon.svg and icons/icon-dark.svg.

[BsNoSi]

As you can see in the very first comment, I chose a color, that works independent of desktop background but with transparency. This adopts seamless to any background color.
To get “seamless” done with black/white (or colored icons), it requires a white mask.

The following icon is the "black grey" one but has a white mask around and inside.

This png simulates a black background:

Black only

[BsNoSi]

A few general thoughts on the icon:

We humans are “eye animals” and orient ourselves by patterns. Many icons are “square and practical” and make use of the available space. But next to each other on the desktop, they all look somehow the same, because we orient ourselves first by the shape.
If the icon breaks the standard “square” shape, its outline alone makes it very easy to grasp and its recognition value makes it “clearer”.

Visual Studio Code Logo, VLC Media Player, Audacity (a few well known examples) stand out in numerous icons on the desktop due to their “different” shape.

(Spontaneous attempt)

[pbek]

(Spontaneous attempt)

They wouldn't work down at 16x16, would they? 😅

I now tried your "Black only" version and added a white background to the "note area".
Seems to work...

[pbek]

I put the new icons in a new branch:

https://github.com/pbek/QOwnNotes/blob/feature/icon2024/icons/icon.svg

[BsNoSi]

I will remove my „special editon icon“, as soon as it is available. Pleased, that I could help a little bit.

[pbek]

And here is the icon on a light background:

It looks a bit boring now tho. 🤔

[BsNoSi]

This is, why I meanwhile prefer single color transparent icons as in my first comment:

This is very easy to see in my taskbar, because it stands out from the existing background:

In Explorer it is much more expressive (to me) as the current standard icon:

Orange has the advantage of being “somehow colorful”, but is easy for most people to recognize, even if they have color vision deficiency. Red and blue are much more difficult in this respect.

Maybe these are candidates for you:

Both have a transparent background, the symbol is created with areas so that there are no problems with the line width.

You can change both to any color by editing "fill=" and "color=" inside the svg with an text editor of your choice.

[pbek]

This is, why I meanwhile prefer single color transparent icons as in my first comment:

It's too different from the old icon. 🤔

Maybe these are candidates for you:

I'm not sure yet. 😬

[BsNoSi]

Because of the difference, I made two closer to the current in two colors, that stand out on dark and bright backgrounds. It is also possible, to set the frame to another color than the cloud.
It's only an offer, but your decision.

[pbek]

Maybe something like:

[pbek]

24.11.2

• Some effort was made to make the application icon look better on dark backgrounds
  (for #3147)

There now is a new release, could you please test it and report if it works for you?

[BsNoSi]

Thanks for your effort.

However, at least on my Windows desktop (which is obviously not a benchmark), it does not really improve things: it either remains a 'stain' or 'blends into the background'.

I have placed my last two candidates next to it for comparison.

• The original ① is a 'stain' in both cases. On a white background, it is easier to see as such, on a dark background it shows more detail but is 'very subdued'.
• The blue ② performs poorly when it is dark around it.
• The orange ③ is easy to see in both situations.

Explorer window:

Taskbar:

I can well understand that a relationship arises with an icon that has been used for many years, for the developer of the program it is an emotional thing (I know this myself…).

The icon between ① and ② is a calendar application of mine 'from the last millennium', where a lot of effort went into the icon. If I were to touch the source code again, or develop a successor application, I would still develop a different icon: Clearer, fewer colors. It comes from a time before 'dark mode'. It works surprisingly well, but from today's perspective it is no longer a good icon. I still think it's cool, but on the surface of modern operating systems it's out of date.

That's why I have a request:

If the 'pain of separation' is a block in your mind, don't put any more energy into it. It's perfectly fine. As you can see in the pictures, it can be modified individually, and then it costs the energy of those who want 'something else'.

If you are willing to give a new icon a chance, I would be happy to spend you my time on it. If so (whenever …), please let me know, what is important to you for the QOwnNotes program icon, what it should say, and I will develop variations for you to choose from.

II have found a compromise for myself that combines the shape and color language of the official icon with my desire for ‘recognizable anywhere’.

Explorer ↔ Taskbar

SVG-Icon:

[BsNoSi]

It appears that I am not the only one who thinks that orange is a better visible color than blue on a dark background. Google seems to think the same thing.

[pbek]

I don't know if there is a perfect solution for very dark backgrounds AND light ones. Orange also isn't the perfect answer, I fear people might not find the application at all anymore. I wonder if there is an option to have two icons...

And I found out that some icon variations are missing.

[BsNoSi]

I understand the concerns. People are lazy. Instead of recognizing the potential benefits and advantages, they complain about changes and carry on as before, even though it would be much quicker, easier and better with a new (offered) feature.
Microsoft and various other companies have "gone through it", and now hardly anyone remembers how creepy some earlier program icons looked. Sometimes people want to be forced to be happy ...

{ Meanwhile, as a developer, I've become as selfish as possible: »I« have to like it. And - surprise! - in the overwhelming majority of cases, users are happy with it. }

As for the "two icons": I thought the "Enable dark mode icon theme" option in the preferences would take care of that.

One of my brothers - also a developer - now uses only SVG icons and inverts them (automatically) in his applications depending on the background. No idea if qt can do this.

[pbek]

24.11.3

• All missing and malfunctioning icon variations were generated and added

There now is a new release, could you please test it and report if it works for you?

[pbek]

The previous icon was done by a KDE Plasma designer for a Linux distribution a long time ago, and he upstreamed the icon in case I liked it. It was a big improvement over the previous icon. That was long ago before "dark mode" was a thing, and also long ago before Windows was able to use a "dark mode".

The last release should at least offer multiple icon sizes for Windows and macOS, and also add all missing icons for Windows.

[pbek]

No idea if qt can do this.

It's not a Qt question, it's a question of if you can put different icons for dark / light (not only sizes) in an *.ico file.

[BsNoSi]

🤔

Does this work for you?

[pbek]

Thank you. Is this a screenshot of 24.11.3? It looks much better now, I'd say. Windows uses a very dark background for their dark mode... Hard to have an icon that works on white and black (or really dark) background.

[BsNoSi]

I am using a "mixed mode":

But switching to “dark only” or “light only” does not change the icon anyway.

On a light background, the new icon is a little more detailed, but still a long way behind other application icons, which can easily identify a program without having to look closely.