(Re)building a simplified Firefox logo

Today we are excited to announce a visual evolution of our Firefox brand that will better fit its extended usage beyond that of a desktop web browser. An overview of our brand history and the reasons for this evolution are covered on our Creative blog, so this article will have a brief look at the previous version and then dive into the various visual changes we’ve made with the new design.

What was new is now old

The 2009-2013 Firefox logo is an amazing piece of artwork. That launch visual evolution focused on creating a refined visual element that spoke to the power and newness of the browser – a beautiful asset for a beautiful product. I use that logo every day in my work, and thanks to the Mozilla brand guide and assets repository, more and more people are using it as well.

Through my work and interacting with others who used it in video, print and web, it has become clear that though beautiful, the artwork does come with a few usage concerns like SVG compatibility and color consistency. We’ve listened to feedback over the years and documented these examples. Now, with the desire to reshape the look to reflect our brand evolution, this is the perfect time to step back and solve these issues.

Make the logo simpler

Simplifying a style doesn’t always mean bringing it down to basic geometric shapes and solid colors.

Simplifying a style doesn’t always mean bringing it down to basic geometric shapes and solid colors. You can in fact bring simplicity to a visual by better balancing color, contrast, shape, and detail. To that last point, we removed quite a bit of detail in this latest revision but purposely added more detail where needed to accommodate today’s high resolution screens. The simplification process not only focused on the look but also the structure by making it SVG compatible and more accessible for the broader Mozilla community.

The first step in the rebuild was to go in and strip out all the detail that was using blend mode layering such as multiply, screen and overlay – mostly found in the tail area 1. As stated, a key goal of the redesign was to make it work flawlessly in SVG as well as open up the possibility to rebuild all the internal structure using SVG and CSS gradients. Having reduced the logo down to its shape-tweaked forms 2 and softer gradients, we continued to remove any detail we thought wasn’t critical to the overall image. This tied into another goal of having the image hold up with greater clarity at smaller sizes.

Once we had removed a fair amount of detail in the logo, it was time to look at introducing enhanced detail where it would be needed when scaled to larger sizes. Stephen Horlander recreated all the continents 3 on the globe with high resolution displays in mind and we paired those with a removal of the high gloss 4 to create a softer, deeper color globe. Combining these deeper blues with now lighter oranges in softer detailed fur 5, we achieved that greater contrast that would create better separation of the elements at all sizes.

A final touch that you may notice in the new logo (and one that makes me very happy) is the arm of the fox now extends from a shoulder instead of layering behind his chest 6. It’s a small detail, but it really seems to unify the form of the fox and make him feel more cohesive a brand element.

So there it is. Not a logo redesign, but a simplification in form and function. We hope you are as excited about the new look as we are about using it! Enjoy!