1792247 - Regression: New Application/Dock Icon looks/feels too small

Status: RESOLVED DUPLICATE of bug 1791899

(Firefox :: Shell Integration, defect)

Description

[Mehmet]

Attachment: Finder.png

Nightly 107.0a1 (2022-09-23) (64-Bit)
macOS

The design of the new Application/Dock Icon looks too small. Especially with the dark background of the icon and in Dark Mode with a dark wallpaper. The old icon was more present and much better for recognition. I think the new icon is a regression in accessibility. Please bring back the large icon.

Thanks!

Comment 1

[Mehmet]

Attachment: Dock.png

• Screenshot from the Dock

Comment 2

[Mehmet]

Probably regressed by bug 1784524.

Comment 3

[Mathew Hodson]

This looks like the same as bug 1791899.

Comment 4

[Mehmet]

Attachment: Bottom.png

Yes, the bug looks similar. But the main problem I reported here is that the logo itself in the template looks too small. Please compare with Safari's or Chrome's icon. The padding between the template border and start of the logo is much larger than in Safari's or Chrome's icon. This not used space makes the Firefox logo feel very small compared to the other icon (besides the reasons reported in bug 1791899.)

Here is a screenshot of the issue marked with a red line.

Comment 5

[Mehmet]

Attachment: actual_vs_expected_mockup.png

• a screenshot/mockup how it would look with a larger logo in the template when using a light or dark background.

Comment 6

[[e-mail] (:bhearsum)]

I just prepared a build with a potential replacement icon. It can be found here if anyone wants to take a look.

Comment 7

[Mehmet]

(In reply to [e-mail] (:bhearsum) from comment #6)

I just prepared a build with a potential replacement icon. It can be found here if anyone wants to take a look.

Thanks. The Template/Background has a slight shadow at the bottom now, right? What about the Firefox logo in the template itself? Will it stay as it is or will it be adjusted/enlarged to take more of the empty space at bottom/top/left/right?

Comment 8

[Christian Apolloni]

(In reply to [e-mail] (:bhearsum) from comment #6)

I just prepared a build with a potential replacement icon. It can be found here if anyone wants to take a look.

The Firefox logo still looks kinda smaller compared to other Dock icons. I don't think the shadow helps enough to offset that effect.

Comment 9

[[e-mail] (:bhearsum)]

Patches with the new icons are coming in https://bugzilla.mozilla.org/show_bug.cgi?id=1791899, and will be uplifted to Beta as well.

Comment 10

[Mehmet]

Thanks !

Comment 11

[Jihwan Kim]

The Firefox logo itself will remain as what we have due to the Firefox mobile version (iOS). Since they are in the same branding, the product and UX team thought it would make sense to have the aligned logo (size and placement) that FX iOS team had created. There might be a possible update in the future but as of now, we decided to go with what we provided to Ben.
To answer Christian's question, did you mean the size of the FX logo as the entire square-round? This somehow looks a bit smaller due to weird illusion... I used the Apple template from their site that provides exact icon sizes.

Comment 12

[Christian Apolloni]

(In reply to Jihwan Kim from comment #11)

To answer Christian's question, did you mean the size of the FX logo as the entire square-round? This somehow looks a bit smaller due to weird illusion... I used the Apple template from their site that provides exact icon sizes.

In my case I have a Dock with dark-blue background and the square-round blends with the background itself. This is shown in the screenshots above too, e.g. "actual with a dark wallpaper" in #5, where it seems there is no square-round and only the smaller Firefox logo.

With a bright background it looks much better since the square-round does not blend in with the background, but it still looks somewhat smaller than other dock icons, I guess due to an illusion effect. All the other dock icons have a bright colored square-round or a bright border around the dark square-round which might explain why they are perceived differently compared to the Firefox icon.

IMHO with a bright background the current Firefox Dock icon is acceptable, but with a dark background the current Dock icon appears too small. IMHO it's irrelevant that it's actually the same size, if it ultimately appears out of place.

A different approach might be by using a bright square-round instead of the current dark-blue one or introduce a brighter border around the square-round.

Comment 13

[Jihwan Kim]

We will consider the suggestions for the future rounds. I've explored the ideas that include a bright square-round but as I mentioned already, we will have to discuss with the mobile team to further update. So the desktop team agreed with using a darker background for now to be consistent with the FX branding.
I personally have a dark desktop background and I have no problem with seeing the icons clear. The dock panel is lighter transparency on my screen as a default.

Comment 14

[Jihwan Kim]

Attachment: Icons on Dark background desktop

The icons are shown fine in the dock with the dark screen background.

Comment 15

[Mehmet]

Attachment: logo_too_small.png

Hi, as I noted before. The Logo is definitively too small on bottom, left, right. There is wasted space, which would make the logo larger. Please compare with other dock icons logos. Screenshot is attached. Thanks.

Comment 16

[Christian Apolloni]

(In reply to Jihwan Kim from comment #13)

I personally have a dark desktop background and I have no problem with seeing the icons clear. The dock panel is lighter transparency on my screen as a default.

I posted in the other bug how it looks on my Dock, which is with the default Monterey Graphics desktop in Dark mode: https://bugzilla.mozilla.org/show_bug.cgi?id=1791899#c8

I think you are using a dark background but a Light appearance settings and that's why your Dock appears so bright.

Comment 17

[James]

I agree that the size of the actual firefox icon should match other circular apps on macOS, and that the dark icon background makes it look out of place on the platform. Matching the macOS icon to the iOS icon does nothing to help firefox’s “brand identity” and only makes the application look more awkward on macOS than it should. There’s a reason multiple people have already noticed this. On top of this, the iOS firefox icon does not even fit with the native iOS icons either! Icons have the same scaling on iOS as macOS so on both platforms firefox is smaller than the other circular icons (safari, settings, clock, find my, compass, etc.) which all have a standard scaling. Seems to me like the perfect time to refresh both icons and scale them to match apple’s platforms (in mozilla’s defense, apples’s icon blueprint is misleading for the correct size of circular icons). Since it seems that the firefox team has decided to stick with their current version (at least for now) here’s a custom version of the icon that fixes these issues: https://file.io/86j3gKXE1mLx. It was created using apple’s own icon template and is pixel perfectly aligned to safari’s icon at every resolution.

Comment 18

[Mehmet]

Attachment: new_logo_size_in_icon_template.png

I noticed in bug 1791899 that you have adjusted/enlarged the logo size in the template now. It looks better now and matches as expected e.g. with the Chrome or Safari Logo size. Many thanks!

Comment 19

[[e-mail] (:bhearsum)]

All the updating ended up happening in bug 1791899.