Open Bug 1648386 Opened 2 years ago Updated 12 days ago

Square icon for macOS Big Sur

Categories

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

Unspecified
macOS
enhancement

Tracking

()

REOPENED

People

(Reporter: ardacebi1, Unassigned, NeedInfo)

References

(Blocks 1 open bug)

Details

(Whiteboard: [mac:ux])

Attachments

(11 files)

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?

OS: Unspecified → macOS

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

Component: Untriaged → Widget: Cocoa
Product: Firefox → Core

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

Severity: -- → S3
Flags: needinfo?(shorlander)
Priority: -- → P2
Status: UNCONFIRMED → NEW
Ever confirmed: true
Attached image firefox-square-icon.png

My potential concept

How is something like this?

Duplicate of this bug: 1649287

Aaron, could you find somebody to take this?

Flags: needinfo?(stephen) → needinfo?(abenson)
Flags: needinfo?(abenson) → needinfo?(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?

Flags: needinfo?(mschwarzlose)
Flags: needinfo?(mheubusch)
Flags: needinfo?(emanuela)

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.

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

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!

(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

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

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

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

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.

This is what Firefox Alt from this website looks like.

Attached file Firefox_Alt.icns

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

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.

Flags: needinfo?(emanuela)
Status: NEW → RESOLVED
Closed: 1 year ago
Resolution: --- → WONTFIX
Duplicate of this bug: 1677945
Flags: needinfo?(mschwarzlose)
Duplicate of this bug: 1693192
Duplicate of this bug: 1705014
Duplicate of this bug: 1706457
Whiteboard: [mac:ux]

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

(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/

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.

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

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

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.

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

Status: RESOLVED → REOPENED
Resolution: WONTFIX → ---

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

Duplicate of this bug: 1714481

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.

(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?

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

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

See Also: → 1709985

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

Flags: needinfo?(abenson)

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

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

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

Here's the same icon as an ICNS file.

see comment below

see comment below

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.

Corresponding icon with exceeding edges for Developer Edition

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

Attached image Padding Comparison

Example for above comment

(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?

You need to log in before you can comment on or make changes to this bug.