Implement Themed App Icon

[mduchev]

What is the user problem or growth opportunity you want to see solved?

Since the 1st/2nd Android 13 beta, Google has been pushing the new Themed App Icons. We've already seen several apps adapting this new styling (e.g. 1Password 8, Reddit, etc). I know that it's a bit early to have this change inside Firefox, but the official Android 13 release is almost here, so we have to think of implementing it at some point. The APIs for Android 13 have been finalized, so this for sure will make it into the release.

How do you know that this problem exists today? Why is this important?

Firefox, like many other apps, hasn't implemented the new icon. It would be good at some point to have this new styling come to Firefox on Android as well, since it would increase the UI/UX.

Who will benefit from it?

All users running Android 13+

UX provided release icons

icons
todo: icons for beta/nightly

┆Issue is synchronized with this Jira Task

[MEXISNAKE]

Pretty please? It's the only app on my phone's home screen that doesn't match the theme!

[bruuteforce]

Excited to see 🔥🦊 in monochrome icon

[JordanDChappell]

+1 from me, currently using Chrome browser on my phone to match my home screen theme, but would love to make the switch back to Firefox as my default app.

[mcarare]

UX would need to provide a monchrome icon resource for this.

[coolreader18]

Isn't there already one? Just looking on the logo section of Mozilla design guidelines the Firefox logo zipfile has a Fx-Browser-icon-oneColor.svg which seems to be exactly what this feature would need.

[mcarare]

For UX evaluation, this is what it would look like, with tint adapted to the current OS wallpaper:

Notice the other icons for comparison.

[lime124]

from design systems: Here should be all assets to make this happen at the right sizes. This includes assets to do the adaptive color and adaptive shape as well following this template: https://www.figma.com/file/rPjPBDNz95wRi501zppMwy/Android-App-Icons-(Community)?node-id=0%3A1
Android Themed App Icons.zip

[lime124]

updating label - lmk if you need anything else!

[fice-t]

@lime124 How should the Beta/Nightly/Debug icons be handled? The debug icon seems fine to leave out (it's uncommon + making it stand out seems reasonable), but having installations of more than one of Release/Beta/Nightly and wanting them all to be themed seems like something that should be supported.

[jane-wolf]

@fice-t @lime124 and I talked through this and we currently can release the default icon as a themed option. The other icons would need some sort of badge to them but that is not possible for Android theming at the moment.

Currently Google themed icon docs don't have any info on adding a badge layer, and our beta and nightly icons are all the same shape.

[kbrosnan]

I would be happy to take the fix that works on release for now and file a followup to get some designs that work with the prerelease channels. It looks like Chrome beta creates a segment that divides the bottom of the circle and has the beta text.

[fischer-felix]

In the above commit, the monochrome icon is just the standard icon with the gradients and the globe in the middle removed.
Imo this would be the most vanilla approach, but I think it might be worth considering a line style icon.
Since this would be quite a far step from the current look, I wanted to ask here first and get some opinions.
I'm thinking maybe we could just use the icons from LawnchairLaucher/lawnicons, as the licence should allow it. This would also solve the issue of separate icons for Beta, Nightly and Release.

Below are screenshots of the modified stock icon and the regular and beta variants of the lawnicons:

[fischer-felix]

quick correction, forgot the official onecolor icon before, so her it is as well:

[nidmb]

To be honest, I like both versions. However, I would lean towards using the solid icon so that it matches Pocket's icon design:

[nyabinary]

I like both icons as well, but I prefer the non-solid icon; it looks cleaner in my view. It also works more with other themed icons, such as Google-themed icons.

[Kernald]

The trend with the latest ones from Google (if it's anything to go by), namely Dialler, Messages and Contacts, seems to be preferring solid layers and negative colour for separating them. Overall, I think the solid variant would fit in better, but that might just be due to the icons I'm personally using.

[iamshilov]

Solid seems like the best variant.

[fischer-felix]

So since solid seems to be the preferred option, I made a rough mock-up of how the beta and nightly badges could be implemented.

I'm not really happy with it myself, but can't really find what's bothering me.
What do you think?

[uniquePWD]

Rather than add that square, could the Fox not be hugging a circle with the letter B in? So it's kinda integrated into the current design in a more organic manner?

[fischer-felix]

Absolutely love the idea!
Tried it with both Nightly and Beta, and it works quite well with an N, but the B looks a bit off (at least blown up when designing, now that I see it smaller in here, it might actually be fine when scaled down to icon size).


Note: I know that the letters are a bit off-centre in there

[uniquePWD]

I like that a lot. Simple, clean and effective.

[Kernald]

Another option which might make the letters easier to identify could be to keep the letter in the bottom right corner, but use a similar negative space as a separation rather than the block you used in the previous iteration. That kind of negative space as separation is also what's used in recent Google icons, e.g. Messages and Contacts.

Note: I'm not using any other builds than the release one so I'm not sure what the current icons look like.

[Otard95]

I apologize in advance if this is considered inappropriate to ask in issues like this, I'm just new to following GH issues for Firefox. Is there a place to see the timeline of these sorts of issues, or if not, where are we on this one, I'm exited to see it released!

[fischer-felix]

We are currently working out the best style for all icons, so once that's done I can file a pull request.
From then on it depends on the maintainers and if they have anything they want changed.

I hope to have a finalized icon by the end of the week.

[fischer-felix]

Another option which might make the letters easier to identify could be to keep the letter in the bottom right corner, but use a similar negative space as a separation rather than the block you used in the previous iteration. That kind of negative space as separation is also what's used in recent Google icons, e.g. Messages and Contacts.

Note: I'm not using any other builds than the release one so I'm not sure what the current icons look like.

So you mean sort of like this?

[Kernald]

That's exactly what I had in mind indeed!

[jane-wolf]

hi all, our design systems team will reconvene and choose the style that works best for these additional logos. Since this impacts a brand logo, it may need to go through some approvals. With it being a holiday in the U.S this week we will get back to you with an ETA on Monday for any approvals needed.

[NathanC]

These mock-ups look great! What about the Fennec F-droid icon? I like the Fennec logo quite a lot, but I'd prefer an adaptive icon even if it's the same as the standard Firefox icon.

edit: I'm not sure if the Fennec icon is sourced from the fenix repo, or if it's added by the F-droid packagers. If this is out of scope, I apologize.

[fischer-felix]

If the packagers apply their own patches to the codebase it's up to them if they want to keep the standard adaptive icon ore change it.
If they don't explicitly change it, the icon should be the same as upstream.

[CeruleanDerpo]

I think that the beta themed icon looks better if it is more like the normal version. It is more recognizable in my opinion

[fischer-felix]

That looks quite good!
Only concern I have is that when shown as an app icon (i.e. a lot smaller) you might not be able to read the text anymore, but it might be fine.

[jane-wolf]

hi all, just wanted to let you know that I've sent the different versions to legal, marketing, and localization and are waiting for feedback. I also found out that we try not to include words in imagery since they cannot be translated to different languages.

[NathanC]

@jane-wolf That's a good point about words in imagery, though beta is Greek and used pretty universal in tech. Alternatively the beta character could be used, would be pretty universal. That being said, I'm not a huge fan of how the beta character looks, just a potential suggestion. And maybe a small moon + stars symbol for the nightly icon version?

(Also just as an FYI for anyone here, it looks like the Fennec fdroid package now has a themed icon, and it looks great!)

[CeruleanDerpo]

Maybe the nightly icon could be a color inverted version of the normal one (everything dark except for the Firefox logo)

[nidmb]

For comparison, here are some examples of how other browsers are handling themed beta icons:

On a sidenote, it also shows how far behind Firefox really is.

[sv-amocirean]

Verified as fixed on the latest Nightly from 11th of January 2023 (110.0a1).
Devices used: Samsung Galaxy S22 Ultra (Android 13), Google Pixel 6 (Android 13).