Mozilla Open Design

branding without walls

Evolving the Firefox Brand

2,212 responses

Say “Firefox” and most people think of a web browser on their laptop or phone, period. TL;DR, there’s more to the story now, and our branding needs to evolve.

With the rapid evolution of the internet, people need new tools to make the most of it. So Firefox is creating new types of browsers and a range of new apps and services with the internet as the platform. From easy screen-shotting and file sharing to innovative ways to access the internet using voice and virtual reality, these tools will help people be more efficient, safer, and in control of their time online. Firefox is where purpose meets performance.

Firefox Quantum Browser Icon

As an icon, that fast fox with a flaming tail doesn’t offer enough design tools to represent this entire product family. Recoloring that logo or dissecting the fox could only take us so far. We needed to start from a new place.

A team made up of product and brand designers at Mozilla has begun imagining a new system to embrace all of the Firefox products in the pipeline and those still in the minds of our Emerging Technologies group. Working across traditional silos, we’re designing a system that can guide people smoothly from our marketing to our in-product experiences.

Today, we’re sharing our two design system approaches to ask for your feedback.

 

How this works.

For those who recall the Open Design process we used to craft our Mozilla brand identity, our approach here will feel familiar:

  • We are not crowdsourcing the answer.
  • There’ll be no voting.
  • No one is being asked to design anything for free.

Living by our open-source values of transparency and participation, we’re reaching out to our community to learn what people think. You can make your views known by commenting on this blog post below.

Extreme caveat: Although the products and projects are real, these design systems are still a work of fiction. Icons are not final. Each individual icon will undergo several rounds of refinement, or may change entirely, between now and their respective product launches. Our focus at this point is on the system.

We’ll be using these criteria to evaluate the work:

  • Do these two systems still feel like Firefox?
  • How visually cohesive is each of them? Does each hold together?
  • Can the design logic of these systems stretch to embrace new products in the future?
  • Do these systems reinforce the speed, safety, reliability, wit, and innovation that Firefox stands for?
  • Do these systems suggest our position as a tech company that puts people over profit?

All the details.

The brand architecture for both systems is made up of four levels.

Each system leads with a new Firefox masterbrand icon — an umbrella under which our product lines will live.

The masterbrand icon will show up in our marketing, at events, in co-branding with partners, and in places like the Google Play store where our products can be found. Who knows? Someday this icon may be what people think of when they hear the word “Firefox.”

At the general-purpose browser level, we’re proposing to update our Firefox Quantum desktop icon. We continue to simplify and modernize this icon, and people who use Firefox tell us they love it. Firefox Developer Edition and Firefox Nightly are rendered as color variants of the Quantum icon.


Browsers with a singular focus, such as our Firefox Reality browser for VR applications and our privacy-driven Firefox Focus mobile browser, share a common design approach for their icons. These are meant to relate most directly to the master brand as peers to the Firefox Quantum browser icon.

Finally, the icons for new applications and services signal the unique function of each product. Color and graphic treatment unite them and connect them to the master brand. Each icon shape is one of a kind, allowing people to distinguish among choices seen side by side on a screen.

Still in the works are explorations of typography, graphic patterns, motion, naming, events, partnerships, and other elements of the system that, used together with consistency in the product, will form the total brand experience.

Read along as we refine our final system over the next few months. What we roll out will be based on the feedback we receive here, insights we’re gathering from formal user testing, and our product knowledge and design sensibilities.

With your input, we’ll have a final system that will make a Firefox product recognizable out in the world even if a fox is nowhere in sight. And we’ll deliver a consistent experience from an advertisement to a button on a web page. Thanks for joining us on this new journey.

Madhava Enros, Sr. Director, Firefox User Experience

Tim Murray, Creative Director, Mozilla

2,212 comments on “Evolving the Firefox Brand”

  1. Boy Guy wrote on

    I love the second one but I do not like the new apps and services icons

  2. David Naylor wrote on

    Cool! System 1 gets my vote. Feels the most cohesive with the current brand.

  3. Franco wrote on

    I love the first system, though, the second system’s Browser Icons get to my feels (mostly because of the paws) however If I understand correctly, the ones from the first system are better because of their simplicity and distinctive elements (such as the big ears and no paws :( ) as they’ll be easier to read in any size.

  4. Seb wrote on

    System 1 to me feels like the overall design is more coehsive, but I don’t particularly like how it is all focussed on the same very refined colour palette. It’s not as dynamic. The second style is definitely more dyanmic, while still keeping a consistent feel. I like the colour choices, and feel like they would go well as Application Icons. However, I really like Style 1’s new main logo. I think changing up the entire brand logo would be a really neat play.

    I’ve circled and cannot choose haha.

  5. Ani Naser wrote on

    Personally I prefer System 1 as a whole. The colors feel like they create a more cohesive branding, and I’m not a fan of the light gray backgrounds on System 2 icons. All designs however are quite modern and eye-catching and I applaud all of the designers who created them!

  6. Denis Kolesnikov wrote on

    Looks very neat and vivid! Great job!

  7. Eliz Kılıç wrote on

    First of all, I think the decision to update the design identity is spot on. For the systems, I don’t think second one is consistent. It feels like 2 sets (brand and browser, and the rest) have been put together as an alternative. Having different colors for different apps is not a bad approach but I think orange flame is already a well known brand color of firefox. Therefor I think you should proceed with System 1.

  8. Todd wrote on

    System 1 is better overall, but the fox is cuter in System 2. Perhaps there’s a way to combine the best of both worlds…?

  9. Ryan Hayle wrote on

    Firefox is the browser, full stop. The “master brand” that it and all other products should fall under is Mozilla.

    These designs are terrible—they look like they were designed by some marketing douchebag who is trying to apply everything he or she learned in their overpriced degree program without any real-world experience. The existing Firefox logo is great—probably the best one you’ve ever had.

    Stop wasting money on things that aren’t necessary! All of your time and resources should be put into code and standards advocacy for an open, private internet.

    Fire your entire marketing department. They serve no purpose in an open source project. Stop acting like a corporation. It just continues to turn people away from your products.

    1. JustOff wrote on

      I totally agree.

  10. Lycurgus wrote on

    The masterbrand icon in system 1 looks too much like the Gitlab logo, which has gotten pretty big recently after MS acquired Github.

    The general-purpose browser icons in system 1 look nice, very reminiscent of the classic Firefox logo but more sleek and modern. The blue sphere also keeps it easily distinguishable from the masterbrand icon.

    My personal recommendation: Use the general-purpose browser icons from System 1, and use everything else from System 2.

  11. Hohotun wrote on

    System 1 feels more consistent. But I personally don’t like Masterbrand icon.

  12. Marlon wrote on

    I like the System 1 icons, especially the ones for the browser. They are what I expect of the brand and look comfortable (not jarring, compressed, to the point).

    I don’t like the System 2 icons though. Here is why :

    The white-space in in the center of the Firefox logo strikes me as odd. It looks wonderful on the Masterbrand Logo, but I don’t expect the emptiness in the actual Firefox Logo to be there.

    Another gripe are the shadows/motions that are engraved in the lines of the other System 2 icons. They make the shapes appear busier, something I’m not expecting with your brand. Having those and the gradient seems overwhelming.

    The outlines for the System 2 icons disrupt the circle on the Firefox logo. They add to an already busy icon. They’re also barely visible with a white background. They might stand out on a black or grey background (which is important to me, as a Dark Theme user).

    One last word on the System 1 Masterbrand :
    I don’t think it fits in with the rest. It’s a lot more angular than the Firefox Logo (which most people will see/recognize). Maybe shape the ears in a curved manner, like you did with in the Firefox Logo. The cheeks/ chin looks very flat as well. The snout is unusually sharp when compared to everything else.

    I hope I could help.

  13. Raleigh wrote on

    Please don’t simplify the logo too much. I’ve used Firefox almost exclusively since around 2005 and I miss the more detailed logos. I’d have to vote for system 1 since the general browser icons seem more familiar to the brand.

  14. Sean wrote on

    System 1. Although I think I like System 2’s general-purpose browser icon shapes, all the other shapes of System 1 make me think of Mozilla/Firefox. System 2’s icons are a bit “complex” with the folds and shadows which I personally don’t find attractive. System 1’s icons are a _bit_ abstract, though. Still—I prefer System 1.

  15. Martin Anderson wrote on

    System 1 for the Masterbrand.
    System 2 for the General Purpose Browser Icons.
    System 2 for the Singularity Browser Icons.
    System 1 for the App Icons.

    Choose colours that work with all these choices, and it will look modern and fresh

  16. Mugdho wrote on

    System 1 General Purpose Icons are great. Same for Singuarly focused. But the package is less understandable for the rest of the thing.

  17. Juan Albarran wrote on

    I think System 1 is the best option out of the two, at least it shows greater potential for development. The outline-based iconography of System 2 feels too generic and doesn’t remind me of Mozilla in any way, except for the Masterbrand Icon and the Browser Icon. System 1 shows depth and maturity, and is more reminiscent of the Mozilla brand, now modernized. My main feedback with System 1 is that it could have a simpler color palette. As its stands, it feels a bit messy. Some icons, like the ‘photo’ one, could also benefit from simplification, as the four dots in its current form feel unnecessary. The Masterbrand Icon of System 1 is very good. It is both perfectly abstract and also very clearly depicting a fox. The geometry of this language makes it look more thoughtful, mature, calculating and gives more room for variety. The icons from System 2 all have the exact same structure and patterns. It makes it slightly more consistent at the expense of being boring and generic. System 1 FTW!

  18. Sudomoose wrote on

    I really like everything about system 1, not a huge fan of really anything about system 2. Props to the design team for their work on both. I think system 1 will also work better on many different backgrounds.

  19. Asael wrote on

    I like the idea of using System 1 for the Masterbrand and System 2 for everything else.

  20. Diego Moya wrote on

    Well, I for one applaud the initiative. Having a unified identity that can be expanded to a new product family is commendable, and I won’t be the one to speak ill of whatever sacrifices are needed to achieve that goal.

    That said, as a lover of what Mozilla represents for Libre software and an open web, and being a user of the browser since when it was still branded as a bird rising from its ashes, I’m not at all convinced with either of the proposals here; I can see where they’re coming from, but both still need some work to become something I’d dare to call “Firefox”. (There’s no need to say, what follows is just my own personal impressions and feelings with no claims to ojectivity).

    The worse offender in that respect is the “General purpose browser icon”. I just loved how the previous “Quantum Browser” redesign managed to simplify the old icon while fully maintaining it recognizable; for that reason, it’s a real shame that such effort will be lost, in both of these new proposals.

    From day 1, Firefox has always been a recognizable Giant Red-Orange Fox groping over the Planet. You remove the blue planet as in System 2, and it becomes a bland circle, indistinguishable from every other shiny round logo in any other app or company. You change the head’s shape and remove the arm as in System 1, and it’s not the same fox hugging the planet anymore, becoming no longer our beloved Firefox identity. Please, PLEASE maintain the core icon as close as possible to the current version and don’t remove any element from it (System 2 would be much more recognizable here as “the same icon” than System 1, were it not for the lack of planet).

    Now, to answer your other concerns:
    -Maybe you could keep the planet-less icon just for the masterbrand, and retain the blue planet for the browser? Pretty please?

    -The masterbrand icon in System 1 does feel like belonging to the Firefox brand. Kudos for this highly recognizable fox head facing the front; it’s a welcome expansion to the iconography. The masterbrand in System 2 could be any company (*cough* Ubisoft?…*cough*), only resembling Firefox when placed alongside the generic browser icons.

    -System 1 is much more cohesive as being “the same identity” for all its icons. In System 2, the hollow “apps” and “special browsers” icons don’t look at all the same as the sturdy “masterbrand” and “generic browser” icons. The cold color palette in “new apps and services” in System 2 doesn’t even blend in with the previous warm icons, they look disjoint.

    -The warm palete in 1 is more homogeneous, though a bit boring (it might benefit from mixing warm oranges and cold greens in the same icon for the “apps and services”, just like the “specific browsers” combine successfully the oranges and blues).

    – The “new apps and services” in System 2 are completely unrememberable to me; I couldn’t be able to recognize them a second time. Those in System 1 are way more distinctive and recognizable, and I could even try to guess what service they provide from their shapes (tabs, images, security, some kind of flow). system 2 just look like random geometric shapes (except for the “image” icon, which is clearer in System 2 than in 1). System 1 volumetric polygons looks easier to expand into new recognizable shapes than System 2 flat curved lines.

    – As for the icons representing “modernity”, “techology” or “people over profit”… I’ve never believed on iconography conveying values on their own, no matter how much the marketing people insist; that’s what the copywriting is for. What matters here is this subjective feeling of “is this still Firefox”? If you nail that, the values will come attached to the already established brand recognition over all this years.

    Keep the good work! Hope to keep myself up to date with how this initiative evolves.

  21. Nathan Billington wrote on

    System 1, all the way. Animals are a very successful way to brand things (think of Frontier’s wildly successful talking animals campaigns), so you want to maximize that– make the fox easier to identify, more recognizable.

    For the master icon (again, system 1), tweak this design so it’s clearly a fox– its maybe a bit too abstract for the general consumer– and that’s the mission of firefox, to empower and protect the general consumer.

    For the general-purpose browser icons, I think these are a huge improvement over the current firefox icon, simply because the Fox’s face is in profile, making it easier to identify. I’d suggest working with the colors/gradients around the face so that the face is nice and easy to read– the human brain loves faces, and abhors not being able to see them clearly.

    Also with your color choices keep the color disabled or color impaired in mind– the logos should be able to reduce down to black and white in such a way that the logos aren’t dependent on color.

    Again, love system 1. Go with a Fox’s face over abstract fire. Faces are more personable; fire can get lost in ambiguity.

  22. Nico Burns wrote on

    I’m a big fan of system 1.

    It seems more unique. Also, softer and more human that goes well with Mozilla (and Firefox) values.

    I also *much* prefer the masterbrand logo in system one. It’s recognisably a fox, whereas the other one is rather nondescript.

  23. dolphinling wrote on

    I saw the first set of icons and thought “wow, that’s really good”. Then I saw the second set of icons and thought “wow, that’s really good too!”

    I’ve been a mozillian since 2002 and have used Firefox since Phoenix 0.1 (yes, really). The Firefox icon has a tremendous amount of personal meaning to me.

    This post gives me confidence that as it continues to evolve, it’s in good hands.

  24. J.F. McCullers wrote on

    I did not really like the idea of a family of “visually cohesive” icons when i began reading this post. It just didn’t seem like the something that was necessary. In the two examples that come to mind (Microsoft Office and Adobe Creative Suite) the visually cohesive icon families do create a strong brand identify, but they also seem to submerge the individual characteristics of each app or service. I was worried that this family of icons approach would become tiresome, and might lock designers into a look that would be hard to change in the future.

    All that aside, however, I changed my mind after look at the two concepts presented here. When seeing them all at once, it is clear that there is an underlying logic and order to how the designs are similar and how they are different. After seeing this, now I’m surprised to find myself thinking this approach might actually help differentiate the products and services.

    I strongly prefer System 2 over System 1.

    There are two weakness to System 1 that I think are hard to overcomes. The first is the emphasis on the fox image, which was always a metaphor. The masterbrand icon for System is a straight-up fox, and the fox isn’t doing anything at all. It isn’t being swift, or sly, or clever, or any other desirable things for which foxes enjoy such a good reputation. It’s just a fox, and it makes me weary. Even worse, all of the other icons on this system seem bloated, and quite difficult to identify as anything at all, and even more difficult to tell apart. Given that these will often be used on small mobile screens, this problem seems fatal.

    System 2 is much better. The emphasis is on the swirl, which connotes energy and motion and getting things done. It still seems fresh, and even small portions of the swirl will still be brand-identifiable. Even better, the icons are quite easy to differentiate and tell apart. I’m not too crazy about the broken lines in each icon, since the breaks appear to be purely decorative and convey no information. I worry that these breaks will date the icons quickly as we tire of the broken effect. I do like how easy they are to identify even in small resolutions, and so they’re my strong preference so far.

  25. adr wrote on

    System 2 is preferable because it is easier to distinguish from each other. At the end of the day, I’m going to stick all of my applications from Mozilla in a folder named Mozilla except for the one-maybe-two apps I use frequently. System 1 is more color thematic and that’s probably the worst quality to have when distinguishing icons; both MS Office and Google Docs use a different color for each application for exactly this reason.

  26. onur wrote on

    System 2

  27. Josh Triplett wrote on

    Version 1 just doesn’t seem at all like Firefox; it seems like a different product or brand entirely. It doesn’t feel recognizable, and looking at it, I’d never have connected it to Firefox in any way. It also seems confusingly similar to the icon of Gitlab.

    Version 2 feels very much like an updated version of the Firefox identity. I can look at it and *immediately* think “that looks like Firefox” with no prompting; it’d be different, but recognizable.

  28. Andrew R Giroux wrote on

    Personally, I think that System 1 is more cohesive. While I love both design patterns, I think System 1 stands out and stands together more.

    The icons for the main for the main browser in each system look like Firefox, but I think System 1 as a whole reminds me more of how I view Firefox currently.

    As for future products, I think both design patterns allow for expansion, but while I like System 1 better, I think System 2 will be simpler and potentially more versatile for expansion and new icons. However, I think System 1 is bolder and stronger in it’s uniqueness to the brand.

    While I think the color choices in both are good, I think System 1 presents a warmth that more strongly presents your brand goal of displaying people over profit.

  29. me wrote on

    2

  30. Margeaux wrote on

    System 1 is fire AF
    System 2 feels sitcker-ish and meh

  31. rawados wrote on

    System 1

  32. Megumin Satou wrote on

    Regardless of master-brand choice, I gotta admit that I really dig the merchandising options already! That statue of David mockup looks quite spiffy.

  33. dre g wrote on

    I like to see the progress here! It feels like the right time to refine the brand identity further.

    My thoughts:

    The browser icons for System 1 maintain the current Firefox identity, and the soft rounded edges do connote the general sense of “fun” of the original Firefox logos. But while the new non-browser icons are “fun,” I feel like all the sharp, >120-degree corners have been shaved off to make it kid-friendly. System 2 still feels like Firefox to me: the colors and shapes still maintain a sense of identity, and carry forward the sharp corners and charm; it maintains more readily identifiable relationships with the existing work. Smart, mature, and less tethered to a specific trendy motif.

    Both System 1 and System 2 are mostly cohesive; again, the browser icons seem like they stand out from the rest. System 1 has a lot stronger color synergy. While the masterbrand in System 2 carries over the Firefox legacy, the “ribbons” identified in System 2’s style don’t have as strong a relationship to the browser icons.

    I can see how both System 1 and System 2 will expand; they will each run into their own difficulties as the product lines expand.

    Both systems reinforce the ideas of speed, safety, reliability, wit, and innovation — I appreciate the bold color choices.

    System 2 feels like it prioritizes people over profit; the lines are fun with balanced counterforms, maximizing legibility at a wider range of sizes. I feel that System 1, though, sacrifices personal identity for brand cohesion at a cost of making it harder to see what each shape represents, particularly with the new apps/services icons.

    Thanks for sharing your progress so far!

  34. Atom Ridge wrote on

    I think the System 1 icons look better across the board, since most of them retain the orange that people associate with Firefox. The S1 Masterbrand logo does look an awful lot like the GitLab logo, but the S2 one looks a bit too similar to the browser icons, so IMO, I think S1 would be a better choice.

  35. Joshua N wrote on

    I like system 2 better. cleaner

  36. Guilherme wrote on

    I hate everything about both of these new icons. I love the Firefox icons as they are right now.

  37. Michelle Cohrene Funk wrote on

    It think system 2’s fiery tale swoosh is more evocative of FireFox.
    And system 1’s fox head is really hard to differentiate from the GitLab fox.
    The cleaner lines of the rest of the icon set are nice vs the muddled/blocky aspect of system 1, but lack overall brand cohesion

  38. Aldo wrote on

    i pefere the system logo 2, ’cause it looks like more modern.

  39. Andre Cunha Paiva wrote on

    System 2

  40. Aaron B. wrote on

    System 2 definitely looks better in my opinion. But I would use the masterbrand logo from System 1 and then all the other System 2 icons.

  41. Pablo wrote on

    I love the system 2 better, it keeps the firefox sign more simple and recognizable. However, in the general purpouse category, I think version 1 does better

  42. Tom wrote on

    System 2

  43. Foxi wrote on

    System 1 is ICONIC! Can I get that shirt in XL?

  44. Taylor wrote on

    I like both systems, but system 1’s master icon looks too similar to Gitlab’s. That could be a source of confusion.

  45. Patrick Kinne wrote on

    System 2 100%. System 1 is way too close to Gitlab.

  46. WellBattle6 wrote on

    System 1 feels more cohesive. It seems to be more recognizable that they come from the same brand, while system 2 risks icon confusion with other companies apps. I’ll give you a warning about possible brand confusion when using the Foxhead logo with Gitlab’s Tanuki logo.
    The Verge article also has lots of comments on your designs. I was directed to this blog from there.

  47. WellBattle6 wrote on

    Also, there appears to be a severe length in time between comment actually being posted from submission.

  48. Carlos Fangmeier wrote on

    Hi, I think the masterbrand icon 1 look to similar to the one of gitlab and smartcat.

  49. Dmitry Kudriavtsev wrote on

    I really like System 1’s icons for the single focused browser icons, but I prefer the System 2 masterbrand. I think System 2’s Firefox Quantum icon would be better with the blue sphere/circle in the background (similar to the current icon)

  50. Jody Bruchon wrote on

    Go back to the styles from Netscape and Firebird and maybe even early Firefox. Please stop with all this flat-inspired new stuff. Some things never needed to be changed. I’ve attached a suggestion that is “Ars Technica approved:” https://arstechnica.com/information-technology/2016/08/mozilla-is-changing-its-lookand-asking-the-internet-for-feedback/?comments=1&post=31746991#comment-31746991

More comments: 1 2 3 4 5 … 41