Facebook’s visual identity already had a lot going for it in 2008 when I started working there. They had chosen a bold and simple color scheme, had a simple well crafted wordmark, and had thankfully avoided the glossy web 2.0 aesthetic so prevalent at the time. Still, I believed there was huge opportunity for refinement. That opportunity, along with their mission and company culture, was a major reason why I wanted to work there.
Unfortunately, refining a visual identity that seemed to work alright did not rank high in the list of priorities. In our efforts to keep up with Facebook’s rapid growth, designers regularly one-offed designs for new products or initiatives. This inefficient use of time also led to a very fragmented visual landscape.
One of the first efforts to address this came at a Hackathon in 2009, when fellow designers Everett Katigbak and Mark Bixby joined me in an exercise to rethink Facebook’s wordmark. I followed this up by writing Facebook’s identity guidelines, illustration guidelines, and design resources wiki.
Over the years I made progress on various pieces in this system, advocated to anyone who would listen, and also had several failures. I always believed that a more significant effort was needed. Facebook has a long history of projects being self-initiated by passionate individuals within the organization, and in 2012 I was determined to develop a comprehensive and cohesive visual identity system.
My first big opportunity to try some of these ideas came in 2012 when I noticed some mockups for the upcoming Camera app circulating on Pixel Cloud—Facebook’s internal tool to share design mocks. The product designers were proposing to use the typeface Klavika for the Camera wordmark. While Klavika does have good qualities, I have always felt like it was too stiff and mechanical for Facebook’s brand. Seeing an opportunity, I contacted them, and despite being days away from the launch, they humored me. I quickly started redrawing Klavika for the Camera wordmark to make it just a little more humanist.
Despite the Camera app’s limited success, the custom type was well received internally and used. After modifying Klavika again ourselves for other projects, we decided to commission Eric Olson—the original designer of Klavika—to take the approach and develop a complete typeface. Currently the typeface has two weights—regular and semibold—and supports over 75 languages.
Soon after Camera, and concurrent with the typeface development, I started applying this same philosophy to the rest of the identity. Despite having the full wordmark, the favicon had become the primary identity mark for Facebook, and there were efforts under way to replace the wordmark in the products with just the favicon. Facebook had done a poor job providing these assets to the public, and as a result, many people often made their own. Even if they did find the official one, the two-color design also led many people to modify the icon. All of this, as you can imagine, resulted in a lot of fragmentation. This fragmentation wouldn’t have been so bad, but even Facebook itself wasn’t always consistent. Shown below are the two primary favicon designs it was using—and there were others.
Attempting to solve this, we created a new favicon that was strong enough and flexible enough to work in any context. Collaborating with Aaron Sittig—designer of the first favicon—our approach was to redraw the “f”, adjust the proportions, and remove the bottom highlight bar so the new favicon at its core is a simple one-color glyph.
One of the issues with the previous favicons was their use on certain backgrounds or in certain contexts. An obvious benefit of a one-color glyph is that it can work as either a positive or negative shape.
I worked with designers Jorn van Dijk and Brandon Walkin on hinting the new favicon for all the various sizes needed in the product interfaces.
Another important consideration of the new favicon was designing with modular border radius in mind. Whenever possible, we use the default radius, but to accommodate certain interfaces or contexts—like iOS—where a different radius is ideal, the icon can be adjusted by Facebook designers and select partners.
Finally, the new favicon is also designed with different visual styling in mind. While the shape and proportions should not be altered—aside from border radius—the icon itself can be styled to match the visual aesthetic of a particular interface or context. Shown here are the icons for iOS and Android respectively—styled by Jorn van Dijk.
All of this hopefully makes it much easier for third-parties to incorporate and style the glyph for their interfaces without modifying the shape or proportions. Below are some mockups incorporating the new favicon.
Having mostly finished the development of the typeface and new favicon, I developed standards and templates for the creation of new sub-brands. A sub-brand is just any subordinate product, service, team, group, page, etc. Over the years, sub-brands had been developed in a one-off approach—each designer solving the same problems over and over. Not only does this lead to messy visual design, but it’s also an incredibly inefficient use of a designers time.
My approach to this entire system can be summed up with tools not rules. Instead of creating a bunch of rules telling people “no,” I tried wherever possible to create a flexible, well-documented system of assets that was easier to use than the alternative. One rule I did create though, was not to incorporate the favicon into a new mark for a sub-brand. It’s difficult to ask third-parties not to modify our favicon if we then do it ourselves.
With that in mind, Jorn van Dijk and I developed guidelines for creating new icons for sub-brands. Each icon at the basic level needed to function as a one-color glyph, but it could also be rendered in a full-color illustrative version.
After an exhaustive survey of existing Facebook sub-brands, I tried to create an extensive system of the various lockups someone might conceivably want to use for a sub-brand. Again, instead of trying to be very restrictive, I wanted to try to accommodate the past while moving us towards consistency.
One of the main places these sub-brands show up publicly is on Facebook operated pages, so designer Kris Brady and I worked with the teams who ran the pages to update their icons within the new system. These simple one-color glyphs perform much better at all the sizes necessary for the product interface.
The original 16x16 pixel Like icon used in the interface was drawn by Soleio Cuervo. I was responsible for adapting all of the pixel icons into larger vector illustrations for use in marketing materials. During this visual identity redesign, I took the opportunity to simplify the icon I’d drawn previously and worked with the Internationalization team to create translated Like button graphics.
One of the most important and time-consuming aspects to this project was writing the documentation and creating ways to easily distribute the assets to people. Internally, I built, wrote, and maintained the Design Resource Center page on the internal wiki. I also worked with designer Kris Brady and the marketing team to build an external facing Brand Resource Center.
Since leaving Facebook in 2014, it’s been exciting to see this system being implemented by Facebook. Third-party implementations of the favicon are also a vast improvement. Below are uses of the system that I did not design.
Facebook as a product and organization evolves very fast, and it was a challenge trying to design a system that was flexible across many mediums and contexts. Separate from the visual design work, there was the incredible task of creating awareness, gaining support, and ultimately creating a cross-functional team to approve and implement these changes. Even though no system is ever perfect, I’m proud of what we accomplished and look forward to seeing how Facebook continues to evolve their visual identity.
| Ben Barry | Design, Creative Direction, Project Management |
| Aaron Sittig | Design—Old Favicon and Collaborated on New Favicon |
| Tim Belonax | Design—Collaborated on Sub-Brand System and Typeface |
| Scott Boms | Project Management—Typeface |
| Eric Olson / Process Type Foundry | Design—Typeface |
| Jorn van Dijk | Design—Favicon Styling / Hinting and Icon Design |
| Will Ruben | Project Management |
| Matt Beaman | Partner Management |
| Kat Johnston | Legal |
| Kris Brady | Design—Page Icons and Brand Resource Center |
| Wirestone | Development—Brand Resource Center |
| Brandon Walkin | Design—Favicon Hinting |
| Adam Mosseri | Project Management—Camera App |
