New icon for Fennec F-Droid


#1

Gather submissions ideas and discussions in this thread.
Related gitlab issue: https://gitlab.com/fdroid/fdroiddata/issues/1206#note_72547511

And mentioned in #TWIF W19: https://f-droid.org/en/2018/05/11/this-week-in-fdroid-w19.html

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


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

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


#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: https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive

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.


#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:


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


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

#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:


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


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:

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


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


#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: