1648386 - Square icon for macOS Big Sur

Status: RESOLVED DUPLICATE of bug 1784524

(Core :: Widget: Cocoa, enhancement, P2)

Description

[Arda Çebi]

Attachment: macOS Big Sur system apps next to Firefox

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_16) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Safari/605.1.15

Steps to reproduce:

Actual results:

Expected results:

Almost every macOS app now has a square icon which makes Firefox and other 3rd party app icons look bad.

Is there a discussion for a square icon for macOS Big Sur? If not, can this be one?

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 2

[Stephen A Pohl [:spohl]]

This will need UX input. Stephen, could you forward to someone who could take a look? Thanks!

Comment 3

[Arda Çebi]

Attachment: firefox-square-icon.png

My potential concept

Comment 4

[Arda Çebi]

How is something like this?

Comment 6

[Markus Stange [:mstange]]

Aaron, could you find somebody to take this?

Comment 7

[mheubusch]

Thanks, Arda and Markus! I will route this past our design system team tomorrow. Arda, if approved, do you have the correct file type for the asset we will need to include in our app bundle?

Comment 8

[Markus Stange [:mstange]]

It would be an icns file.
Here's a list of our current in-tree icns assets: https://searchfox.org/mozilla-central/search?q=&path=.icns
Here's a list of bugs that previously updated the Firefox icon: https://hg.mozilla.org/mozilla-central/log/tip/browser/branding/official/firefox.icns

Once we switch to the new icon, it would be used across all macOS versions. I don't think there is a way to ship multiple icons and pick the right one based on macOS version.

Comment 9

[Haik Aftandilian [:haik]]

(In reply to Arda Çebi from comment #0)

Expected results:
Almost every macOS app now has a square icon which makes Firefox and other 3rd party app icons look bad.
Is there a discussion for a square icon for macOS Big Sur? If not, can this be one?

Thanks for the report and mockup. For what it's worth, I prefer the current icon. The Firefox logo would have to be much smaller to fit within the square.

Comment 10

[Markus Stange [:mstange]]

So yes, our ask to UX is not necessarily "Please make a square icon", it's more of a "Please evaluate our dock icons on Big Sur with respect to OS integration, and determine what, if anything, we should do about it." Thanks!

Comment 11

[Michal Jakubowski]

(In reply to Markus Stange [:mstange] from comment #8)

Once we switch to the new icon, it would be used across all macOS versions. I don't think there is a way to ship multiple icons and pick the right one based on macOS version.

There seems to be an unofficial way - having two icns files, with one for Big Sure having "-1016" added to the filename. Source: https://twitter.com/stroughtonsmith/status/1276963977134776325

Comment 12

[Markus Stange [:mstange]]

Attachment: square Chrome Canary icon

Chrome Canary (their equivalent of Nightly) recently updated its icon on Big Sur.

Comment 13

[emanuela [ux]]

We are looking into updating our icon as well. I'll post an update at the end of this week

Comment 14

[Arda Çebi]

(In reply to mheubusch from comment #7)

Thanks, Arda and Markus! I will route this past our design system team tomorrow. Arda, if approved, do you have the correct file type for the asset we will need to include in our app bundle?

I unfortunately don't have the exact sizes as I think there's a need of multiple sizes on Mac apps (e.g. 1x, 2x etc.), though I can provide a .PSD, .SVG, and any other similar formats of the concept I sent. I can also elaborate on any minor or major modifications on the icon before sending it in if you'd like.

Comment 15

[Iván Ávalos]

Hello! I'd like to suggest the Firefox Alt icon in this website, it's really nice! It uses the same purple background that Firefox uses on the mobile launcher icons, and I think it would perfectly fit with Big Sur.

Comment 16

[Iván Ávalos]

Attachment: Screen Shot 2020-11-12 at 10.23.23 pm.png

This is what Firefox Alt from this website looks like.

Comment 17

[Iván Ávalos]

Attachment: Firefox_Alt.icns

This is the .icns file of Firefox Alt icon in the website.

Comment 18

[emanuela [ux]]

Hey all, with the design team we decide to keep our own style for now, and not aligning at this moment with the macOS style. I think we can close this bug and re-opening it if and when needed.

Comment 19

[Stephen A Pohl [:spohl]]

Per comment 18.

Comment 20

[sorenpearson]

(In reply to Stephen A Pohl [:spohl] from comment #19)

Per comment 18.

How come this was closed and the resolution of Wont fix?

The icon needs to be changed to conform with MacOS Big Sur based on Apple's developer design guidelines.

Comment 23

[Stanzilla]

Please reconsider.

Comment 26

[sorenpearson]

I wonder why this won't be fixed, what's the reasoning behind the resolution?

Comment 27

[L]

(In reply to sorenpearson from comment #26)

I wonder why this won't be fixed, what's the reasoning behind the resolution?

Please read:

(In reply to emanuela [ux] from comment #18)

Hey all, with the design team we decide to keep our own style for now, and not aligning at this moment with the macOS style. I think we can close this bug and re-opening it if and when needed.

Regardless, I think that as more time passes and more apps adopt the guidelines the team should reconsider this decision.

Take a look at some good ideas here (search "Firefox":
https://macosicons.com/

Also, here are the Apple Human Guidelines on this:
https://developer.apple.com/design/human-interface-guidelines/macos/icons-and-images/app-icon/

Comment 28

[Sören Hentzschel]

Regardless, I think that as more time passes and more apps adopt the guidelines

I doubt that. Still almost no other non-Apple app that is installed on my device adopted the icon style after so many months.

Comment 29

[Archit]

(In reply to Sören Hentzschel from comment #28)

Regardless, I think that as more time passes and more apps adopt the guidelines

I doubt that. Still almost no other non-Apple app that is installed on my device adopted the icon style after so many months.

I don't think so, so many 3rd party applications have adapted to this design to suit Big Sur. Discord, Chrome, Brave, Microsoft Edge are all thrid-parties and they are not an apple product (keep in mind that this is just to mention a few). I think the design team needs to look over this again.

I understand that people have concerns over making the Firefox logo small by adapting to such design, but when you look at other browsers such as Brave, Chrome and Edge, it seems to be very fine. While it does make it look smaller, it's still big enough. This is how the trend is going at Mac Big Sur, I hope the design team understands this and does the needful. While there are some third-party apps that haven't changed their design yet like Firefox, apps are slowly but are adapting to this new design and we have popular names (as mentioned before) moving to such trend and it just suites Big Sur and its ecosystem. I hope Firefox keeps up with this trend.

Comment 30

[Archit]

(In reply to emanuela [ux] from comment #18)

Hey all, with the design team we decide to keep our own style for now, and not aligning at this moment with the macOS style. I think we can close this bug and re-opening it if and when needed.

As said in my previous comment, we have most of the browsers and other third parties (non-apple products) adapt to the new MacOS style on Big Sur. I hope Firefox keeps up with this trend, especially ahead of proton update. Please do reconsider this.

Comment 31

[Martin Balfanz [:mbalfanz]]

Thank you all for the feedback! I just want to chime in and let you know that this is still on the table and conversations are on-going. I'll keep you posted in this bug when something new comes up.

As a side note, it's unlikely to get this resolved for MR1/Proton, as this project is already in Beta.

Comment 32

[Martin Balfanz [:mbalfanz]]

I'm reopening the bug while the team is reconsidering their decision.

Comment 33

[Archit]

(In reply to Martin Balfanz [:mbalfanz] from comment #32)

I'm reopening the bug while the team is reconsidering their decision.

I really appreciate the team for reconsidering as this is where the trend is going in Mac Big Sur, and I hope Firefox keeps up with it.

We don't need to have the background white like Safari, Chrome or Brave has, we can make purple background for firefox instead, this will match the Firefox brand while matching the Mac Big Sur UI, very well.

Comment 34

[Ethan]

Glad this is being reconsidered! I think it will fit with the Proton goals of making Firefox look more modern and fit in with the OS better (eg. with native context menus).

An icon seems like a really small thing, but when you're getting some random person to give Firefox a try, "this application is so outdated it doesn't even have a Big Sur icon?" is a surprisingly big thing that affects people's perceptions of Firefox! Especially when pretty much all other browsers have Big Sur icons now.

Comment 36

[Emir SARI]

Or better, have the fox touch the edges of the rectangle, and let the necessary parts overflow a bit, like Apple has done with some of their applications.

Comment 37

[mrsebastienleblanc]

Firefox is basically the only browser that did not adopt the new Big Sur icon style with Opera.
Chrome, Edge, Brave, Vivaldi all adopted the new style.

Comment 38

[Neal Dave]

really would like this as it sticks out when every other app in the dock is square and rounded

Comment 39

[L]

(In reply to Martin Balfanz [:mbalfanz] from comment #31)

Thank you all for the feedback! I just want to chime in and let you know that this is still on the table and conversations are on-going. I'll keep you posted in this bug when something new comes up.

As a side note, it's unlikely to get this resolved for MR1/Proton, as this project is already in Beta.

Martin, any news on this for a yes or no?

Comment 40

[Martin Balfanz [:mbalfanz]]

It's a yes. It's mostly a bandwidth issue at this point, but we haven't forgotten about it.

Comment 41

[Stephen A Pohl [:spohl]]

Fyi, Thunderbird fixed this in 91.0.2 (bug 1709985).

Comment 42

[u690577]

Firefox remained one of the few web browsers, if not the last web browser, to not have updated its icon on macOS. Is there any news on the development of this icon? Just as an FYI, the guidelines provided by Apple are not being followed
https://developer.apple.com/design/human-interface-guidelines/macos/icons-and-images/app-icon/

Comment 43

[u690577]

Firefox is one of the few, if not the only, web browser that hasn't updated its icon on macOS. In particular, the guidelines provided by Apple are not followed https://developer.apple.com/design/human-interface-guidelines/macos/icons-and-images/app-icon/

Comment 44

[Romain Testard [:RT]]

Hello, raising this here that it should be a priority in Q4 and pinging Aaron for help in helping prioritize with visual design.

Comment 45

[L]

(In reply to Romain Testard [:RT] from comment #44)

Hello, raising this here that it should be a priority in Q4 and pinging Aaron for help in helping prioritize with visual design.

Please do not just add a white background like it was done for Thunderbird.

I explained the reasons on the above linked bug:

It is boring, looks generally unpleasant with a system dark theme, and is not part of the palette of the original [Firefox] icon.
Here are some examples of macOS-design-compliant icons with non-white backgrounds:
Spotify, Facetime, Messages - Green
Zoom, Teamviewer, Appstore - Blue
Discord - Purple
Anydesk, Music - Red
In short, pretty much none of the big players uses white as background on macOS.

Comment 46

[Blake Winton (:bwinton) (:☕️)]

Looking at https://share.getcloudapp.com/o0uPr5nZ I see Spotify with a circular background, and VS Code, Calendar.app, and Slack with white backgrounds… Oh, also Edge and Chrome.

I'm not sure what Aaron will come up with, but I'm confident he'll take everything into account, and while it almost assuredly won't please everyone, I'm looking forward to it, no matter what it ends up being. 🙂

Comment 47

[torbjørn]

Attachment: Square icon for Firefox Developer Edition

I've created a square icon for the Developer Edition, using the official design resources provided by Apple.

Comment 48

[torbjørn]

Attachment: Square icon for Developer Edition as ICNS file

Here's the same icon as an ICNS file.

Comment 49

[rafael]

Attachment: firefox icon big sur exceeding app shape edges

see comment below

Comment 50

[rafael]

Attachment: firefox icon big sur exceeding app shape edges (preview)

see comment below

Comment 51

[rafael]

Comment on attachment 9244753 [details]
firefox icon big sur exceeding app shape edges

I was wondering why no suggestion until now made use of the fact that Apple explicitly allows it that the logo exceeds the borders of the app shape. They do that with their own apps too (see textedit, preview etc.).

Therefore, we could make use of that and let the tail of our fox exceed the borders. For the background I would suggest to use something similar to the iOS app but with a slight gradient. therefore, in order to also fit the "universe theme" in which the world finds itself in, I chose a very dark purple background based on the color palette of the icon.

That would be my suggestion.

Comment 52

[torbjørn]

Attachment: Firefox-DevEdition-BigSur-Alt.png

Corresponding icon with exceeding edges for Developer Edition

Comment 53

[logicer]

My biggest concern with letting the tail be outside of the app shape is that, because the fox is mostly circular, scaling it up to the required size leaves no space between the sides of the icon shape and the sides of the fox. This then, to me at least, makes it look like rounded corners were added rather than the overall shape becoming a rounded square. Also it seems unusually large when placed beside other apps from Apple that are still circles with boarders.

I'd recommend something with a similar scale to torbjørn's original, except with rafael's suggestion of a gradient (and possibly the shadow seen in their example).

Comment 54

[logicer]

Attachment: Padding Comparison

Example for above comment

Comment 55

[uufcalqhrj]

(In reply to torbjørn from comment #47)

Created attachment 9244735 [details]
Square icon for Firefox Developer Edition

I've created a square icon for the Developer Edition, using the official design resources provided by Apple.

That looks really good. Your version has my vote here.

Could you do an icon for Nightly, Beta, and the Release edition?

What is the timeline for this? Surely this should be high up on the priority list? Has there been any official notice from Mozilla as to when this change will be implemented across the Firefox web browsers?

Comment 56

[rafael]

Are there any new advancements? Not that it is too much of a deal but I really think it would be important for Firefox as a brand because it – at least to me and other people I've casually talked to about it – it just leaves a bitter aftertaste in the overall experience. It just makes an impression the best browser in the opinion of many people does not deserve.

Comment 57

[Maki]

(In reply to rafael from comment #56)

Are there any new advancements? Not that it is too much of a deal but I really think it would be important for Firefox as a brand because it – at least to me and other people I've casually talked to about it – it just leaves a bitter aftertaste in the overall experience. It just makes an impression the best browser in the opinion of many people does not deserve.

I agree. I made my own icns file and I'm manually replacing the icon every time I need to reinstall Firefox. This should be so easy to update. The app "image2icon" on the macOS app store will let you select an image and background color to generate a Big Sur icns file if you don't want to do it manually.

The originally attached icon here: https://bugzilla.mozilla.org/attachment.cgi?id=9244735 is just right and fits within the guidelines perfectly.

Comment 58

[chavezhzpn01]

Now most of the apps I use adopted the new macOS design guideline. Go little fox!

Comment 59

[sorenpearson]

I see this has been opened over 2 years ago and wonder why it has taken so long to conform to the MacOS design language or Human Interface Guidelines https://developer.apple.com/design/human-interface-guidelines/macos/icons-and-images/app-icon/)

For app icon attributes, it says the following under Shape "Square with rounded corners"

Comment 60

[L]

I see that many comments are being set as offtopic, which is fair, but it would help if there was an official statement on the situation.
It's also fair to say that this is not something that should require this long to decide on, so an update would be helpful.

Comment 61

[:Gijs (he/him)]

At this point the last few comments have all not added value here, and they do cause emails to over 50 people and counting, so I'm going to restrict comments going forward. The design team is aware of this bug and more comments indicating that individuals think this is really valuable aren't going to help the design team magically find time or move much faster.

Comment 63

[[e-mail] (:bhearsum)]

I believe this is now done on Nightly, via https://bugzilla.mozilla.org/show_bug.cgi?id=1784524 (although we will make some small improvements in https://bugzilla.mozilla.org/show_bug.cgi?id=1791899).