Update macOS icon to the Big Sur style

[mmorella-dev]

As of macOS 11.0, Apple's Human Interface Guidelines recommend using rounded-square icons. I've converted the existing circular icon to one based on Apple's provided templates. Looks like this:

In the dock looks like this (next to the original Discord app, for comparison)

Photoshop file: electron.psd.zip

[SpacingBat3]

Wow, that looks amazing, given I haven't made WebCord branding public in vector!

That being said, if you want to I could convert my own vector image to make sure gradient, shadow and other stuff will be consistent between different platforms, I dunno if I should make it public through. One reason why it isn't is now is to protect it a bit from being stolen, I don't want to people use it for clients completely unrelated to WebCord (I feel forks should be allowed, but distributing my WebCord-related images without including the license is forbidden, even as of today).

And sure, this one PR could be merged, branding is the last thing I want to refactor in WebCord + I don't plan to change the directory tree for now, but I would like to compare it with clean vector export and decide which should stay.

[mmorella-dev]

Fair! I traced it as faithfully as I could, although the curves might be off by a few pixels in places, and the shadow opacity was a bit of a guess. One thing I didn't realize until now is that your Clyde has a slight gradient; the one in my graphic is just pure white.

[SpacingBat3]

By looking at this image and following this guidelines @morellam-dev has mentioned, here's what I've ended up with:


Notable changes are:

• My icon tries to follow the boundaries from the image and in result, it is placed a bit differently than @morellam-dev's ones.
• I used original SVG from WebCord to reproduce gradient, clyde design, some shadows etc.
• The clyde is resized and centered according to the image – it might match the macOS design a bit more.
• The background shadow is blurred (which is not the case for circled image), but clyde ones is preserved the way it was.
• Clyde design, among other details, seems to be a bit different to @morellam-dev ones (surely more close to original / current WebCord logo design).

Overall, I've tried to be as much accurate as it was for me possible. Given I don't own macOS and I'm not much familiar as a user with their design, I don't know if the final result is satisfying or not. I might export a series of PNG images from the SVG (hopefully that will guarantee the highest quality of details for bitmap images) and try to bundle them into single ICNS file.

[SpacingBat3]

@morellam-dev What do you think about my image? Maybe you want to close this PR in favor of my work?

[mmorella-dev]

@SpacingBat3 The interior vector and colors look good, although the drop shadow is slightly too dark and displaced compared to the system icons. I downloaded your graphic and masked it against the shape and shadow of the Apple's official production template, giving the following result. This version should also exactly match Apple's app icon shape.

(ICNS version: electron.icns.zip)

If you want pixel-perfect versions using your vector, you'd probably want to fill out the rest of Apple's template and export each individual PNG, although I personally think the downscaled versions generated from the above look acceptable. Here's the 64px, 32px, and 16px versions blown up to 2x scale. And as an easy reference comparison, the corresponding versions from Discord (copyrighted, for reference use only, fair use, 17 U.S. Code § 107, yada yada yada):

PSD File: Template - Icon - App.psd.zip

[SpacingBat3]

The interior vector and colors look good, although the drop shadow is slightly too dark and displaced compared to the system icons.

@morellam-dev I've approached to re-design my logo version based on images and hints you gave me and here's results:


Given I don't own/use PhotoShop and I find SVG more commonly supported, I want to store most of my icons as SVG or at least any kind of open non-bitmap file format (it might be a bit more friendly if I will ever plan to publish them – and I think that might eventually happen someday). While it might be a bit off, I tried my best to make background look as close in shape to yours and make my shadow more fitting to macOS design.

Some changes I did compared with my previous image:

• Icon background is no longer a square.
• Shadow has been re-aligned and made more transparent.
• Gaussian blur (of shadow) has now a bit smaller radius.
• It's still all stored in open vector graphics standard, SVG!

[SpacingBat3]

BTW here's the SVG which contains the exactly same shadow and possibly the same shape (it's optimized, so it might have some coordinates a bit off) I used in my SVG file.