Alternative macOS icon?

laurent · 2020-05-30T14:11:31.213Z

Done And thanks @uxamanda for the suggestion!

uxamanda · 2020-05-31T21:17:10.735Z

Awesome!

elsiehupp · 2020-10-16T19:37:47.707Z

Somewhat ironically, and for better or worse, macOS Big Sur has changed the norms for application icons to more closely resemble those of iOS:

developer.apple.com

App Icon - Icons and Images - macOS - Human Interface Guidelines - Apple...

That said, the corner radius is only one of the aspects of the icon design that doesn't follow the (updated and ever-changing) HIG. Icons are generally supposed to at least vaguely resemble physical objects while still implying a rounded rectangle. Might it be reasonable, say, for the Joplin icon to have a binding on the left-hand side in order to suggest the appearance of a notebook?

I could try and take a stab at this myself...

laurent · 2020-10-16T20:08:17.572Z

We've actually changed the icon not long ago so the basic J would stay the same but if you have some ideas for the macOS icon specifically, feel free to give it a try.

elsiehupp · 2020-10-16T20:22:45.666Z

Oh, yes, the J is cool! I just noticed that the inside is a musical note!

elsiehupp · 2021-01-12T13:27:56.996Z

I finally got around to taking a look at the Big Sur outline shape, only to realize that someone else had beaten me to it. Here's what the Joplin icon currently looks like on Mac:

RoundedCornersMac_1024x10241024×1024 111 KB

I actually started from scratch because I hadn't noticed the new icon. The first tweak I made was replacing the rounded rectangle outline with a "squircle", that is, the peculiar mathematical shape used by iOS 7 and later, as well as macOS Big Sur:

Cocoanetics – 20 Jun 13

iOS 7 Icon Squircle

Apple is not only revamping the look of iOS 7 apps to be kind of flat, also most app icons will have to get a redesign. Over the recent years we could see a trend that some app designers felt that …

I based my outline on the template provided by macosicons.com. Because I was working with the existing SVG file, I just took the gradient and glyph and scaled them to fit the new clipping mask. The template included a raster drop shadow, though I subsequently replaced it with the programmatic one used by the existing icon.

At this point I discovered the updated icon from three weeks ago, and one thing I noticed (in addition to the use of the rounded rectangle outline instead of a squircle) was the use of a bevel. My understanding with the macOS icon guidelines is that pseudo-3D detailing should generally only be used when a design represents a physical object. Also the beveling in the new icon was rasterized, so I was not able to recreate in SVG. The template I used had a much more subtle (rasterized) bevel, which I dispensed with, and the old Joplin icon for macOS also had a much more subtle bevel, so bevels are not necessarily completely verboten.

Another tweak I made, also based on the fact that the icon does not represent a physical object, was to replace the "J" glyph's drop shadow with an inner shadow, based on the example set by the macOS Apple Music icon:

com.apple.Music1024×1024 49.1 KB

This is the result I ended up with:

https://github.com/laurent22/joplin/raw/18436cdc5bb84adb108d04f47c00142241431a9d/Assets/macOs.iconset/icon_512x512%402x.png1024×1024

As you can see, the differences are very subtle. (FWIW because the exact placement of the glyph as well as the exact colors of the gradient I got from the existing SVG file, any differences there are incidental. The color space might also be mucked up, idk.)

Here are the icons side by side for easier comparison:

RoundedCornersMac_1024x10241024×1024 111 KB

com.apple.Music1024×1024 49.1 KB

https://github.com/laurent22/joplin/raw/18436cdc5bb84adb108d04f47c00142241431a9d/Assets/macOs.iconset/icon_512x512%402x.png1024×1024

I have an open merge request with the updated icon, though I am open to feedback, especially about the glyph's inner shadow (and any incidental changes I may have messed up). I uploaded raw vector versions in both SVG and PSD. The SVG version does not have the inner shadow because inner shadows are rasterized in SVG, which makes it un-editable, while the PSD version does. Feel free to make further modifications and upload them here or in the mac-icons branch if you're comfortable using GitHub!

elsiehupp · 2021-01-12T13:48:49.572Z

This may be better in a different forum thread, but I actually started by tweaking the icon to fit the GNOME icon guidelines, which differ from the macOS ones. Among other things, GNOME icons use a different pixel grid; they are rounded rectangles with a specific corner radius; and they don't use integral drop shadows. Gradients generally aren't used, but I stuck with the existing one for consistency. Also GNOME prefers rendering directly from SVG, but I don't know how the application is packaged, so I included PNG exports, as well.

Here's the basic GNOME icon (which is very similar to the previous/existing Linux icon):

JoplinIconGnome

Incidentally, the GNOME Contacts icon is styled like a notebook:

data_icons_hicolor_scalable_apps_org.gnome.Contacts

So I quick threw together version of the Joplin icon based on it:

JoplinIconGnome_alt

Here are all three side-by-side:
JoplinIconGnome data_icons_hicolor_scalable_apps_org.gnome.Contacts JoplinIconGnome_alt

Obviously, the notebook version of the icon is more speculative, while the rounded rectangle is more conservative (based on the existing icon, just with the correct margins and corner radii).

Anyway, let me know what you think of these, too! (Even if this isn't strictly the correct forum thread for them...) The images embedded in this comment are actually all SVG already, so they're ready to edit, but the gnome-icons branch is here, and my pull request is here.

EDIT: Here are some screenshots of the GNOME icons in context in my dock:

existing_icon|512841×167 26.7 KB

gnome_icon|512835×163 24.4 KB

book_icon|512834×166 22.3 KB

To be clear, circular and oblong-rectangular icons are not uncommon in GNOME. Just the only one I have in my dock at the moment is Firefox. The Discord icon has slightly nonstandard corner radii, but it's barely noticable.

B0BIC · 2021-01-14T03:46:48.428Z

Although I use mac, I really like the notebook-style icon.

elsiehupp · 2021-01-14T09:53:24.621Z

The Apple icon guidelines do allow some limited deviation from the "squircle" outline, so here's one possible variation:

macOsIcon_41024×1024

The more compliant thing to do would probably be to have a spiral-bound notebook with all four corners rounded to match the "squircle", but I'm being lazy about drawing a metal spiral from scratch, so this is literally just the GNOME notebook icon with the "squircle" instead of roundrect corners.

I also decided to try styling the "J" glyph as a cutout in the front cover of the notebook, which gives it a plausible reason to be 3D.

Here's a comparison with the other versions:

RoundedCornersMac_1024x10241024×1024 111 KB

https://github.com/laurent22/joplin/raw/18436cdc5bb84adb108d04f47c00142241431a9d/Assets/macOs.iconset/icon_512x512%402x.png1024×1024

macOsIcon_41024×1024

And here it is in the dock with some other Big Sur icons (specifically including a custom Discord icon that also violates the "squircle"):

Screen Shot 2021-01-14 at 4.56.21 AM

It could probably use some finessing.

As before, this variation is available as an editable vector PSD in my pull request if you want to fiddle around with it yourself.

Daeraxa · 2021-01-14T12:58:44.540Z

I've been meaning to reply to this for a little while but just haven't got around to it.
This only really addresses the square/squircle etc. icons as I'm not a fan of the notebook style ones, not that I don't think they look great but the majority of my icons that aren't part of the overall system theme are of the same uniform size and shape.

macOS

I feel this is a good improvement, not that there seems to much in the way of cohesiveness, most of the mac icons seem a little random, even in regards to Apple's own icons. I rarely ever use macOS so don't have much to add here but I do like it.

GNOME/Linux

These GNOME changes I'm not so sure about if they are part of a generic "Linux" change as opposed to just for GNOME environments from what I can tell.
I use Cinnamon and to be honest, neither the current nor new icons look particularly well suited. The current icon is slightly too big and doesn't quite match (different/no shadow) where the new one is more appropriate in size but is the wrong shape, Cinnamon seems to use something more akin to the macOS squircle (which you can see in the second pic, I've not been able to find the guidelines to Cinnamon icons so far) and your macOS icon actually seems to fit in better than the Linux or new GNOME one.

New GNOME icon on Cinnamon panel (current icon far right):

New macOS icon on Cinnamon panel (current icon far right):

I'm aware that I can always assign or make/modify my own icon but I have a feeling the the updater script for Linux destroys the default menu item each time it runs for an update which means either keeping a duplicate version of the shortcut around just for the new icon or having to modify it each time.

elsiehupp · 2021-01-14T14:18:40.885Z

Cool! Thank you for this information!

Yesterday I actually did some more digging and came across the KDE icon guidelines, as well, and they seem largely equivalent to the GNOME icon guidelines (more information below).

With regard to Cinnamon's different icon theme, both KDE and GNOME use the freedesktop Icon Theme Specification, which allows applications' default icons to be overridden at the system level:

https://specifications.freedesktop.org/icon-theme-spec/icon-theme-spec-latest.html

I don't know exactly what is necessary for implementing or enabling system icon theming for Joplin (if it doesn't just work by default), but it should be possible to modify your system icon theme to include an override specifically for Joplin. Additionally, you could request that it be added to the two default icon themes that come with Linux Mint, X and Y.

It's my impression that, while the install script does specifically replace the existing joplin.desktop file, this behavior could be modified and also would not be present if Joplin were distributed through apt, Snapcraft, or Flatpak.

EDIT: I just checked, and the version of Joplin I have installed on my Ubuntu is from Snap, and the update mechanism is maintained by a third party. (There is actually more than one third-party Snap, because reasons.) The Snap uses its own copy of the icon and it own version of joplin.desktop, presumably due to permissions issues. It would be nice if Joplin had official Snap and Flatpak distributions.

As I mentioned above, KDE's icon design guidelines are largely equivalent to GNOME's, with the main difference being that they strongly encourage otherwise flat icons to use a beveled bottom edge (which you can see in the calendar and terminal icons in my screenshot). They also encourage subtle gradients and foreground shadows, though the exact type of shadow is somewhat peculiar.

Developer

Colorful Icons

All the resources for developing using the KDE Platform

I could update the roundrect version of the icon to match the additional KDE recommendations, but in the case of the notebook version it's probably better without the foreground shadow.

Looking at the GNOME guidelines again, the sharp 45º shadow doesn't feature in any of them, so it may be preferable to do without it for the roundrect icon, too.

Daeraxa · 2021-01-14T14:46:30.231Z

So would the better alternative be to have different icons within LinuxIcons to account for the more popular (standard) icon themes (GNOME, KDE, Cinnamon etc.) and for the install script to be modified to select the 'correct' icon for that desktop environment with a default icon as a fallback?

elsiehupp · 2021-01-14T16:33:21.511Z

Yes, having different versions of joplin.desktop or otherwise installing different icons based on distribution would be one workaround. It would probably be best both approaches were accounted for: the install script choosing a different icon based on distro and distros with relatively unique icon themes specifying a preferred icon for Joplin.

See this line here or this section here where the install script could be adapted to account for different default icon themes. (The install script already checks for the distro in this line here, so it shouldn't be terribly difficult for it to check for the distro when downloading the icon.)

It may be useful to check if you're even using the default icon theme on Linux Mint, though. This tutorial discusses changing the icon theme, but you can also use it to see what theme is currently selected:

It's FOSS

How To Install Icon Themes In Linux Mint Cinnamon [Beginner Tip] - It's FOSS

Screenshot tutorial for beginners to show how to install and change icon themes in Linux Mint.

As it is, the icons in the Joplin repository seem extremely disorganized, so it's hard to tell what's currently in use and what's not. (I feel like a README.md in the Assets folder could help in this regard.)

And there are yet more instances where things are slightly "off", like the high-resolution favicon for this forum having hardcoded corner radii when both Safari and Firefox use manual clipping. So you get things like this (from the Firefox "New Tab" screen):

Screen Shot 2021-01-14 at 5.16.47 AM732×272 49.3 KB

Or this (from the Safari "New Tab" screen):

Screen Shot 2021-01-14 at 11.19.50 AM

And the incongruous color icon in the GNOME tray (when Joplin does, in fact, include a monochrome icon that it just doesn't use here):

GNOME tray

While it does use a monochrome icon in the macOS tray (which appears to be this icon? it's not clear):

macOS Tray

So, yes, there is a lot of potential finessing to be done with all of the different use cases of the icons included with Joplin.

elsiehupp · 2021-01-14T20:29:57.791Z

FYI, I did some digging, and it seems like you're using the "Mint Y" icon theme based on the discord icon you have:

So one approach that could be taken in the case of Linux Mint would be for Joplin to use the freedesktop Icon Theme Specification and for a compatible icon to be added to the Mint Y icon theme. ~~Similarly, a GNOME-style icon could be added to the Adwaita icon theme.~~ Using a GNOME/KDE-style icon as the default seems plausibly safe, but I can't back that up with, say, market-share data.

EDIT: GNOME does not seem to distribute third-party application icons in its icon theme. Neither does KDE. So, yes, having the default icon fit with both GNOME and KDE seems safest, while submitting specialized icons to distro-specific icon themes could help Joplin fit in on those platforms.

elsiehupp · 2021-01-26T14:51:03.008Z

Hi @Daeraxa—I just uploaded a version of the Joplin icon to the mint-y-icons repository. The design is literally recolored from the Discord icon, so the detailing should be exactly the same as the other icons in mint-y-icons. You can see my pull request here.

Here's the raw file:

My understanding is that the .desktop file for Joplin will need to be updated to be theme-compatible. I'm not quite sure what's involved, though, so I in my pull request I asked if someone could explain it to me.

Thoughts?

(If you could add a comment in response, that would be nice, since I don't think I can add more than three comments in a row to a thread. Thanks!)

Daeraxa · 2021-01-26T15:31:24.707Z

That is awesome, I'll shove it onto my system when I get a chance.
From what I can see of that mint-y repo you need to submit a version for the various sizes (in mint-y-icons/usr/share/icons/Mint-Y/apps at master · linuxmint/mint-y-icons · GitHub) - unless there is a generator script or something is run to create those automatically in the directory.
I'm not entirely sure but I guess that because the file name is 'joplin.svg' and therefore 'joplin.png' for the actual icons then you don't need to add a manual symbolic link to the repo, it would handle it natively.

elsiehupp · 2021-01-26T17:12:55.210Z

Yeah, I don't know how the repository generates the individual icons. My guess is that there's some sort of script that generates the PNG files from the SVG files? I'm sure one of the maintainers can figure it out, though.

elsiehupp · 2021-01-29T00:51:39.982Z

Hi @Daeraxa ~ @james-carroll figured out how to switch over to a symbolic reference for the Joplin icon on the snap distribution, and the official distribution seems to be already set up that way, so once the maintainers at the mint-y-icons repository accept the pull request there (and, if you're using the snap distribution, once Joplin 1.7 rolls out), you should be all set with the mint-y-style Joplin icon!

james-carroll · 2021-01-29T15:28:36.947Z

Unfortunately I've had to revert the symbolic name for the snap version, due to the existence of particularly old versions of snapd that are still in use in various distributions, there'd be a lot of users who would simply see the Joplin icon disappear entirely. I can re-evaluate it in the future as distributions upgrade overtime but presently it'd do more harm than good.

elsiehupp · 2021-01-30T11:48:50.888Z

It is worth mentioning that you can still create your own .desktop file and add it to ~/.local/share/applications, though this obviously wouldn't be set up by default. And also the official Joplin distribution does appear to use a symbolic icon name, so it should still work with mint-y-icons.