fenix
fenix copied to clipboard
mozilla-mobile
Implement Themed App Icon
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+
┆Issue is synchronized with this Jira Task
Pretty please? It's the only app on my phone's home screen that doesn't match the theme!
+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.
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. 
For UX evaluation, this is what it would look like, with tint adapted to the current OS wallpaper:
Notice the other icons for comparison.
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
Hoping for this soon and a UI overhaul to fix Fenix honestly awful UI. Google Chrome got the themed icon and Material You app design down and it's pretty solid of course, other than being you know, Google.
@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.
@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.
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.
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:
quick correction, forgot the official onecolor icon before, so her it is as well:
To be honest, I like both versions. However, I would lean towards using the solid icon so that it matches Pocket's icon design:
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.
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.
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?
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?
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
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.
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!
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.
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?
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.
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.
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.