New icon for Fennec F-Droid

Apps
1

Gather submissions ideas and discussions in this thread.
Related gitlab issue: Better description + icon for Fennec (#1206) · Issues · F-Droid / Data · GitLab

And mentioned in twif W19: This Week in F-Droid, Week 19 | F-Droid - Free and Open Source Android App Repository

We are aiming for replacing the icons in these folders: https://github.com/mozilla/gecko-dev/tree/master/mobile/android/branding/unofficial/res

And also this about page image (which currently seems not to be used but maybe this’ll be fixed at some point): https://github.com/mozilla/gecko-dev/blob/master/mobile/android/branding/unofficial/content/about.png

1 Like
2

Should we discuss what the final shape of the firefox/fennec #contest is supposed to be, before the next twif deadline? If so, is here good or do we do this thing on GitLab or IRC/Matrix until we have something final?

3

I had some fun with that icon, because there were no clear guidelines, let me know what you need so I can make proper images.

png
png1200×1000 113 KB

I also supplied my email on the pic if you need to contact me, and I somehow disappear from here :wink:

10 Likes
4

Nice! I quite like it :slight_smile:

And yes, right, we need to specify some target image dimensions. Here in these folders are the original images we are aiming to replace: https://github.com/mozilla/gecko-dev/tree/master/mobile/android/branding/unofficial/res

Ping @relan @Manizuca if you are interested in following this discussion :).

5

Nice. I like it. It’s kinda kawai

6

I like it! It’s quite beautiful compared to the Firefox’s :slight_smile:

7

I love the icon! Do you also have an adaptive version?

8

Adaptive as in size?

It’s SVG, sure :wink:

9

@hellcp Android has a new icon standard nowadays called “adaptive icons” where foreground and background are separate, and the user can choose the shape through masks: Adaptive icons  |  Android Developers

If you’d create an adaptive-icon version of it, I’d also be willing to create an android vector icon from it (Android uses an SVG dialect for its icons).

You can see adaptive icons in action with Firefox focus: The background layer, the foreground layer.

Additionally Android usually needs a fallback for older versions and from an adaptive icon definition.

For most apps designers usually create background, foreground, fallback, and then from that someone else writes the actual icon files.

1 Like
12

Alright, doesn’t seem that hard, I will do that when I’m in front of computer again :wink:

13

I like it very much! Much better than the old icon.

14

Here you go, adaptive icon materials are in built/res/mipmap-xxxhdpi and source/res/mipmap-xxxhdpi depending on file type :wink:

Everything else is also available there :smiley:

4 Likes
15

I really like the overall design, too. Just one little thing bothers me. I think the icon should be a bit more round. At the moment it looks like an egg. Maybe this is intended, but if not, can you try how it would look if the fennec a bit thinner at the top?

1 Like
16

I don’t disagree, but I fount this version to be more pleasing. There are multiple things that would need to change for “egg shape” (it’s more of elongated circle). It just looks the best that way

Focus is about Blue → Red gradient, so it makes sense that it has some purple in it. I find that difference in colour of Fennec (it is quite short eared, adult Fennec, because apparently ears get smaller the older Fennec is), white with pink in case of Focus and Yellow → Reddish Purple in case of Fennec (not to mention completely different alignment) is something that differentiates it enough to make it obvious what it is :smiley:

I feel like Klar is a little bit misrepresented, as is isn’t really Focus anymore, but that’s completely different discussion (Fennec Klar would have been kick-ass name) :wink:

What I tried to achieve is different colour scheme of Fennec and Firefox, where Firefox has clear Fire and Water thing going on, Fennec is desert animal, which inspired me to go the route of Disney’s Aladdin colour scheme (as it’s about desert too I guess). Purple → Yellow, with break into reddish purple (which causes that nice orange in the middle).

17

I like the new logo!

I juste wanted to point out that the color purple is the one used for Firefox Focus/Klar, which is also available in FDroid. I fear this might be confusing. The idea is when you see a fox on a circle to know which kind of firefox version it is. Orange+blue = Firefox, Purple = Focus, Blue+other blue = Firefox nightly.
Or maybe it is just me. But when I see the new icon today I immediatly think of Firefoy Focus.

Also I’m not sure if it is suppose to be a fennec fox, or just a regular fox, but I guess it is not a big deal.

Great job, it is definitly a great improvement over the old one.

18

Glad to see so much interest to this topic!

I think a new Fennec icon should:

  1. Be under a free license. F-Droid does not accept non-free contributions.
  2. Be in a free vector format that can be automatically converted to PNG, like Inkscape SVG. Proprietary formats are difficult to work with and usually require proprietary software.
  3. Follow Material Design guidelines. F-Droid is commited to look and feel native on Android.
1 Like
19

Issue with that is, Firefox has their own guidelines, and own style that fits their interface. It’s not really material style. All Firefox icons I have seen in Material style are awful too:

firefox.png1024×1024 99.8 KB

Translations of more detailed icons also don’t really work, they either are too detailed to be considered Material Design, or too simple to be anything specific (for example see above :wink: )

Subjecting my image to such flatification causes it to be much less interesting and it makes it impossible to recognize what it really is (blame author, not the standard):

Screenshot%20from%202018-05-16%2006-32-24
Screenshot%20from%202018-05-16%2006-32-24450×517 26.8 KB

It’s frankly 20s flatification process, so tail and back are a little rough around the edges, which could be fixed if I spent more time on it, that’s not the point though.

If we were to abandon Photon design guidelines in favor of Material, that would mean changing all the Photon Symbolic icons in Fennec to Material symbolic (which differ quite a lot in style). Otherwise it would look out of style for majority of icons.

Firefox fork is terrible for this kind of unification :wink:

20

I got myself interested in making Fennec Klar icon, and somebody pointed out to me that icon that I was doing for it looked like Fennec’s previous one, so maybe this would be more natural:

svg
svg1600×1000 139 KB

I know there is no contest for Klar, but the heck, might as well suggest it :wink:

6 Likes
21

The new design really looks nice and fresh compared to the current design.
As for the colors I would rather go with the F-Droid blue and green as Fennec F-Droid is a special Firefox flavor from this community and in my opinion deserves a stronger reflection of F-Droid.
The colors of the new design resembles to many current original Mozilla Firefox flavours. F-Droid’s Fennec should be more unique and distinguishing from Mozilla.

1 Like
22

I haven’t seen many green or blue foxes honestly :wink:

I don’t want too different icons, as they still represent same branches of Firefox as before.

They are however still different enough to not be straight up mistaken for Firefox.

So maybe recognition of brand association should be about nice looking icons, as opposed to same colours as primary brand and slightly worse looking icons.

And on About page add either:

Screenshot%20from%202018-05-16%2010-50-13
Screenshot%20from%202018-05-16%2010-50-13815×290 34.4 KB
Screenshot%20from%202018-05-16%2010-47-48
Screenshot%20from%202018-05-16%2010-47-48820×286 34.4 KB

5 Likes