# Alternative macOS icon?

**URL:** <https://discourse.joplinapp.org/t/alternative-macos-icon/8996>\
**Category:** Development\
**Created:** [28 May 2020 09:13 UTC](https://discourse.joplinapp.org/t/alternative-macos-icon/8996 "2020-05-28T09:13:38Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)\
**Post date:** [28 May 2020 09:13 UTC](https://discourse.joplinapp.org/t/alternative-macos-icon/8996/1 "2020-05-28T09:13:38Z")

</div>

Just been doing some tests for an alternative icon on macOS, because the current one looks a bit off compared to other icons.

So I’ve added a bit of white/gray gradient on the “J” and a white border, plus some subtle shadows. What do you think? Should we switch to this icon or keep the old one?

![image](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/4/4fd88b9d9e47d3366e8aa93a1c3cea4fb0569bbf.png)

 ![image](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/6/690356f649a20e15fe0c446ac3f554c8177651f3.jpeg)

---

<div class="post-metadata">

**Author:** ![dpoulton](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/dpoulton/32/29723_2.png) [@dpoulton](https://discourse.joplinapp.org/u/dpoulton)\
**Post date:** [28 May 2020 10:52 UTC](https://discourse.joplinapp.org/t/alternative-macos-icon/8996/2 "2020-05-28T10:52:39Z")

</div>

The removal of your tried and tested avatar initially made me think there was some kind of account impersonation going on…

![avatar](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/f/f5b618aac0260a47c56e4f35b1bb6a81b9483bae.png)

---

<div class="post-metadata">

**Author:** ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)\
**Post date:** [28 May 2020 14:31 UTC](https://discourse.joplinapp.org/t/alternative-macos-icon/8996/3 "2020-05-28T14:31:41Z")

</div>

Well I wanted to change my avatar but in the end I didn't know what to put, so I've just removed it 😁

---

<div class="post-metadata">

**Author:** ![dpoulton](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/dpoulton/32/29723_2.png) [@dpoulton](https://discourse.joplinapp.org/u/dpoulton)\
**Post date:** [28 May 2020 17:31 UTC](https://discourse.joplinapp.org/t/alternative-macos-icon/8996/4 "2020-05-28T17:31:49Z")

</div>

> [@laurent](#):
>
> ... but in the end I didn’t know what to put

FTFY

![laurent](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/a/ad47929cac8582607d42ea43bb7fd3e94e7db7f0.png)

---

<div class="post-metadata">

**Author:** ![uxamanda](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/uxamanda/32/6786_2.png) [@uxamanda](https://discourse.joplinapp.org/u/uxamanda)\
**Post date:** [28 May 2020 19:07 UTC](https://discourse.joplinapp.org/t/alternative-macos-icon/8996/5 "2020-05-28T19:07:39Z")

</div>

I prefer the existing one, I feel like the circle/gradient style feels a bit dated. I do think the corner radius on the existing icon is wrong and makes it seem a little off.  
Here is my recommendation :

 ![Joplin icon](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/b/b0e221b01cde1dfbdf13f2dc3c1dccecdb1a2976.png)

This matches the Finder icon radius, 40px at 822px (1024px with a transparent border).

After vs Before:

 ![old new](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/9/9062a2857efc28c3edb07443575c1d97e60ab5bb.png)

---

<div class="post-metadata">

**Author:** ![dpoulton](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/dpoulton/32/29723_2.png) [@dpoulton](https://discourse.joplinapp.org/u/dpoulton)\
**Post date:** [28 May 2020 19:19 UTC](https://discourse.joplinapp.org/t/alternative-macos-icon/8996/6 "2020-05-28T19:19:57Z")

</div>

Just from looking at the screenshots I would say @uxamanda 's suggestion is rather clever. Just by altering the corner radius the Joplin icon keeps true to the main app icon yet looks perfectly at home on the dock.

---

<div class="post-metadata">

**Author:** ![RedDocMD](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/reddocmd/32/2655_2.png) [@RedDocMD](https://discourse.joplinapp.org/u/RedDocMD)\
**Post date:** [29 May 2020 09:01 UTC](https://discourse.joplinapp.org/t/alternative-macos-icon/8996/7 "2020-05-29T09:01:31Z")

</div>

The avatar had so much personality in it that I honestly am finding the absence of it pretty unnerving…

---

<div class="post-metadata">

**Author:** ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)\
**Post date:** [29 May 2020 09:23 UTC](https://discourse.joplinapp.org/t/alternative-macos-icon/8996/8 "2020-05-29T09:23:06Z")

</div>

> [@uxamanda](#):
>
> I prefer the existing one, I feel like the circle/gradient style feels a bit dated. I do think the corner radius on the existing icon is wrong and makes it seem a little off.

Yes that might be it, the existing corners are more iOS-style which is why it looks off on desktop. Let's see what other users think, but I might change it to your icon suggestion then.

I see that most professionally designed icons have a subtle shadow on the central object so I might try to add one too.

---

<div class="post-metadata">

**Author:** ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)\
**Post date:** [29 May 2020 09:26 UTC](https://discourse.joplinapp.org/t/alternative-macos-icon/8996/9 "2020-05-29T09:26:56Z")

</div>

> [@RedDocMD](#):
>
> The avatar had so much personality in it that I honestly am finding the absence of it pretty unnerving…

Say the man with default gravatar icon 😁

I was looking for a more subtle icon actually, since it shows up a bit everywhere, but yes didn't know what to pick in the end.

---

<div class="post-metadata">

**Author:** ![RedDocMD](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/reddocmd/32/2655_2.png) [@RedDocMD](https://discourse.joplinapp.org/u/RedDocMD)\
**Post date:** [29 May 2020 09:45 UTC](https://discourse.joplinapp.org/t/alternative-macos-icon/8996/10 "2020-05-29T09:45:33Z")

</div>

> [@laurent](#):
>
> Say the man with default gravatar icon

Yeah, more apt I guess ....

---

<div class="post-metadata">

**Author:** ![dpoulton](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/dpoulton/32/29723_2.png) [@dpoulton](https://discourse.joplinapp.org/u/dpoulton)\
**Post date:** [29 May 2020 09:46 UTC](https://discourse.joplinapp.org/t/alternative-macos-icon/8996/11 "2020-05-29T09:46:40Z")

</div>

> [@laurent](#):
>
> I was looking for a more subtle icon actually

OH, THANKS! So my suggestion was not subtle and "corporate" enough? (... and possibly open to a few "copyright issues") 🙂

---

<div class="post-metadata">

**Author:** ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)\
**Post date:** [30 May 2020 14:11 UTC](https://discourse.joplinapp.org/t/alternative-macos-icon/8996/12 "2020-05-30T14:11:31Z")

</div>

Done 🙂 And thanks @uxamanda for the suggestion!

 ![image](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/5/5e496d3ec14dc670b9f28e2d874958d351b11321.jpeg)

---

<div class="post-metadata">

**Author:** ![uxamanda](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/uxamanda/32/6786_2.png) [@uxamanda](https://discourse.joplinapp.org/u/uxamanda)\
**Post date:** [31 May 2020 21:17 UTC](https://discourse.joplinapp.org/t/alternative-macos-icon/8996/13 "2020-05-31T21:17:10Z")

</div>

Awesome!

---

<div class="post-metadata">

**Author:** ![elsiehupp](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/elsiehupp/32/5260_2.png) [@elsiehupp](https://discourse.joplinapp.org/u/elsiehupp)\
**Post date:** [16 October 2020 19:37 UTC](https://discourse.joplinapp.org/t/alternative-macos-icon/8996/14 "2020-10-16T19:37:47Z")

</div>

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

> **[App Icon - Icons and Images - macOS - Human Interface Guidelines - Apple...](https://developer.apple.com/design/human-interface-guidelines/macos/icons-and-images/app-icon/)**

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...

---

<div class="post-metadata">

**Author:** ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)\
**Post date:** [16 October 2020 20:08 UTC](https://discourse.joplinapp.org/t/alternative-macos-icon/8996/15 "2020-10-16T20:08:17Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![elsiehupp](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/elsiehupp/32/5260_2.png) [@elsiehupp](https://discourse.joplinapp.org/u/elsiehupp)\
**Post date:** [16 October 2020 20:22 UTC](https://discourse.joplinapp.org/t/alternative-macos-icon/8996/16 "2020-10-16T20:22:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![elsiehupp](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/elsiehupp/32/5260_2.png) [@elsiehupp](https://discourse.joplinapp.org/u/elsiehupp)\
**Post date:** [12 January 2021 13:27 UTC](https://discourse.joplinapp.org/t/alternative-macos-icon/8996/17 "2021-01-12T13:27:56Z")

</div>

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_1024x1024](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/b/bf571fcfa0838743cdcad14653eda413d317c037.png)

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:

> **[iOS 7 Icon Squircle](https://www.cocoanetics.com/2013/06/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](https://github.com/elrumo/macOS_Big_Sur_icons_replacements/tree/master/design) provided by [macosicons.com](http://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](https://developer.apple.com/design/human-interface-guidelines/macos/icons-and-images/app-icon/) 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.Music](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/e/ef7bf9277aa8f467b6273886c6d8594703182c49.png)

This is the result I ended up with:

 ![https://github.com/laurent22/joplin/raw/18436cdc5bb84adb108d04f47c00142241431a9d/Assets/macOs.iconset/icon_512x512%402x.png](https://github.com/laurent22/joplin/raw/18436cdc5bb84adb108d04f47c00142241431a9d/Assets/macOs.iconset/icon_512x512%402x.png)

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_1024x1024](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/b/bf571fcfa0838743cdcad14653eda413d317c037.png) ![com.apple.Music](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/e/ef7bf9277aa8f467b6273886c6d8594703182c49.png) ![https://github.com/laurent22/joplin/raw/18436cdc5bb84adb108d04f47c00142241431a9d/Assets/macOs.iconset/icon_512x512%402x.png](https://github.com/laurent22/joplin/raw/18436cdc5bb84adb108d04f47c00142241431a9d/Assets/macOs.iconset/icon_512x512%402x.png)

I have an [open merge request](https://github.com/laurent22/joplin/pull/4346) 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](https://github.com/elsiehupp/joplin/blob/mac-icons/Assets/macOsIcon_3.svg) and [PSD](https://github.com/elsiehupp/joplin/blob/mac-icons/Assets/macOsIcon_3.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](https://github.com/elsiehupp/joplin/tree/mac-icons) if you're comfortable using GitHub!

---

<div class="post-metadata">

**Author:** ![elsiehupp](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/elsiehupp/32/5260_2.png) [@elsiehupp](https://discourse.joplinapp.org/u/elsiehupp)\
**Post date:** [12 January 2021 13:48 UTC](https://discourse.joplinapp.org/t/alternative-macos-icon/8996/18 "2021-01-12T13:48:49Z")

</div>

This may be better in a different forum thread, but I actually started by tweaking the icon to fit [the GNOME icon guidelines](https://developer.gnome.org/hig/stable/icon-design.html.en), 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](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/5/59f64f6acd7d92a75e3f31f20393811de3427fae.svg)

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

![data_icons_hicolor_scalable_apps_org.gnome.Contacts](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/1/1fc2ff07bb97ba2c2728a7632942bc2dfb6cce78.svg)

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

![JoplinIconGnome_alt](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/3/3e04b3028e43cbd32ece5bace337dcc4a854d1e6.svg)

Here are all three side-by-side:  
 ![JoplinIconGnome](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/5/59f64f6acd7d92a75e3f31f20393811de3427fae.svg) ![data_icons_hicolor_scalable_apps_org.gnome.Contacts](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/1/1fc2ff07bb97ba2c2728a7632942bc2dfb6cce78.svg) ![JoplinIconGnome_alt](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/3/3e04b3028e43cbd32ece5bace337dcc4a854d1e6.svg)

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](https://github.com/elsiehupp/joplin/tree/gnome-icons), and my pull request is [here](https://github.com/laurent22/joplin/pull/4345).

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

 ![existing_icon|512](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/3/3e9c9843a134a2de2c6745390dfd636ffd8a5852.jpeg)

 ![gnome_icon|512](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/a/af4c75840933d9b2bcfd77b7634d23672f2bcb92.jpeg)

 ![book_icon|512](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/c/cad647307192c6fa8a0e692341a780e62fff233f.jpeg)  
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.

---

<div class="post-metadata">

**Author:** ![B0BIC](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/b0bic/32/6569_2.png) [@B0BIC](https://discourse.joplinapp.org/u/B0BIC)\
**Post date:** [14 January 2021 03:46 UTC](https://discourse.joplinapp.org/t/alternative-macos-icon/8996/19 "2021-01-14T03:46:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![elsiehupp](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/elsiehupp/32/5260_2.png) [@elsiehupp](https://discourse.joplinapp.org/u/elsiehupp)\
**Post date:** [14 January 2021 09:53 UTC](https://discourse.joplinapp.org/t/alternative-macos-icon/8996/20 "2021-01-14T09:53:24Z")

</div>

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

 ![macOsIcon_4](https://github.com/elsiehupp/joplin/raw/cea8f216a0a67cb5188bf1ab39265c7308c133b8/Assets/macOsIcon_4.png)

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_1024x1024](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/b/bf571fcfa0838743cdcad14653eda413d317c037.png) ![https://github.com/laurent22/joplin/raw/18436cdc5bb84adb108d04f47c00142241431a9d/Assets/macOs.iconset/icon_512x512%402x.png](https://github.com/laurent22/joplin/raw/18436cdc5bb84adb108d04f47c00142241431a9d/Assets/macOs.iconset/icon_512x512%402x.png) ![macOsIcon_4](https://github.com/elsiehupp/joplin/raw/cea8f216a0a67cb5188bf1ab39265c7308c133b8/Assets/macOsIcon_4.png)

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](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/9/9078a6b84e7f0a70bc40015608d34dafd3f1e3b2.png)

It could probably use some finessing.

As before, this variation is available as [an editable vector PSD](https://github.com/elsiehupp/joplin/blob/cea8f216a0a67cb5188bf1ab39265c7308c133b8/Assets/macOsIcon_4.psd) in [my pull request](https://github.com/laurent22/joplin/pull/4346) if you want to fiddle around with it yourself.

[Next page](https://discourse.joplinapp.org/t/alternative-macos-icon/8996.md?page=2)