Facebook’s Logo Design Secret-Who Designed The Facebook Logo?

Facebook's Logo Design Secret-Who Designed The Facebook Logo?
The future was predicted wisely by Mark Zuckerberg and his creative director
The secret behind the design of the Facebook logo

The secret behind most popular products always raises a high alarm among people.
Every Logo depicts a specific trait of every company, institution or even social gathering. It symbolizes what functions and attributes makes up an institution. 

Ever wondered, “Who Designed the Facebook Logo?” and how the Facebook logo came into existence, well this article is all you need

Brief Description About Facebook

Facebook” which is one of the top 5 social networking platforms known around the world  which originally was called “The Facebook”, was established in 2003 by Mark Zuckerberg along side his Harvard roommate and colleagues Eduardo Saverin, Dustin Moskovitz and Chris Hughes. In 2005, “The” was eliminated, and since then “The Facebook” has been called only “Facebook“.

Facebook’s Logo

The design of the Facebook Logo was as a result of some team effort. It could be said that it was the folks at the “Cuban Council” that designed the “Facebook Logo“.
see more>> facebook logo design

Did You Know:
The Twitter logo was also conceived in the Cuban Council offices?

The Facebook Logo was a modification of the typeface of Klavika (text font) which was designed by Eric Olson.
Joe Kral of TPC also aided in the creation of the Logo for Facebook, which Peter Markatos helped refine and extend to business cards and letterhead and all these was done way before Facebook came into the limelight. Although they did not design it directly, Aaron Sittig and Sean Parker were responsible for the management of the entire process with Cuban Council, yielding key feedbacks and putting them through towards a good outcome.
Mark Zuckerberg decided to make the Facebook Logo blue because he had a deficiency of “color-blindness”. Mark Zuckerberg has a red – green colorblindness but from the way in which the Logo is unique, you can see that he did all he did to his very best to make it right.
Facebook’s Logo Design has changed slightly from it’s original state when it was still known as “The Facebook“.
The original Logo was designed  in 2005, a year after the social network was being launched at Harvard.

Facebook made a similarly slight change to its “F” icon in 2013, excluding a faint blue line that ran at the lower part of the logo. When you’re Facebook, even the most little changes made have a way of obtaining attention from the Internet.

The Facebook icon which represented symbolized by the letter “f” in a blue rounder rectangular shape in a white background; the letter “f” in the icon symbolizes the word “Facebook” (social media linking millions of people around the world);

In our society today, it could also be denoted of the “f” in the icon as millions of addicted Facebook users around the world.


Quick and Easy Way to Facebook Logo Design

Facebook logo design is cool right?
Ever wondered how you could come up with your own custom Facebook logo design? 

Well, this tutorial is the answer to your ever wondering question.

This tutorial will explain in deep details how you can come up with your own custom Facebook logo design in 3 basic steps.
Before we get started, you need to note that,
Logos and illustrations are not in no way related.

Logo simply put, is a symbol. This may confuse you a little.

Symbol – Not Illustration

In this tutorial, you will learn how to create a simple Facebook Logo in 3 easy steps. 

As usual, you need not to have any previous knowledge about Photoshop as i will break each step down to your understanding. You will learn in this tutorial how to work with the gradient tool, shapes, layers, fonts and blend modes.

So let’s get started

Step 1(Facebook Logo Design – Creating Background Layer And Shape)

Open up Adobe Photoshop >> Create a new document and set it to the following presets:

Make sure that the background color is set to white (keyboard shortcut “D” to set the Color Swatch to its default).

Fill the background layer with “White” by pressing the keyboard shortcut “Ctrl/Cmd + Delete”.

Go to the layer panel >> create a new layer >> right click on “Shapes” on the Tool Panel >> select the “Rounded Rectangular Tool” and set the radius to 60 px.

Note that increasing the radius to 60 px gives the shape a more rounded edge;
Hold the “Shift” key on your keyboard >> click and drag from the top left corner to the lower right corner of the work-piece to make a selection of a rounded rectangular shape; 

Release “Click” and “Shift” to reveal the shape. 

Press the keyboard short-cut “Ctrl/Cmd + D” to deselect the shape.
Note that by holding “shift” tends to keep the same “aspect ratio” of your intended shape or selection

Best Way Of Adding A Radial Gradient:

Note that a radial gradient or any other element or effect cannot be added to a shape layer until such a layer is rasterized

Quick and Easy Way To Rasterize a Layer:

…right click on the shape layer >> click rasterize layer. 
“Ctrl/Cmd + click” on the shape layer to make a selection of the shape (alternatively, you can make a selection of the shape by using one of the selection tool on the tool panel);

Select the gradient tool in the tool panel (keyboard short-cut “G”) >> select the Color Radial Gradient and set it to the following presets.

Hold “Shift” + click” and drag upwards on the selection >> release “Click” >> release “Shift” >> press “Ctrl/Cmd + D” to deselect the shape selection.

Step 2 (Facebook Logo Design – Adding Gloss)

Create a new layer >> select the Zoom Tool (keyboard short-cut “Z”) 
Press “Alt/Opt + click” to zoom out of the work space >> select the elliptical marquee tool” from the tool panel (keyboard short-cut “M”)

Click and drag the pointer from outside the work-space to the middle of the work-piece in this manner:


With the foreground color set to white, 

…press “Alt/Opt + delete” to fill the selection with white.

Reduce the opacity of the layer to 15% and press enter.


Most Easy Way of Adding a Gloss Effect:

Create a new layer >> right click on the shape tool on the tool panel >> select the rounded rectangular shape >> Set the radius to 15px.

Set the background color to white. 

Drag a rounded rectangular shape at the bottom side of the work piece.

Set the Opacity to 30%

final gloss effect

Step 3 (Facebook Logo Design – Adding Text)

Note: The font used for the Facebook logo design is Klavika.
Selecting the text tool on the tool panel (keyboard shortcut “T”) >> set the text style to “bold” and the text size to “300pt.
Type in the small letter “f” >> size it to scale using the free transform tool (keyboard shortcut: “Ctrl/Cmd + T”.
note that the original text font for Facebook logo is “Klavika”
Press “Enter” to see the final result

There you have it,

 your own “Custom Facebook Logo Design“.
Place a comment, I would like to know what you think about this…
Also share it with your friends, colleagues and social medias.


Hello there, I'm Godson Chuks by name, the CEO of Tutorialgraphics.com and I welcome you to this platform.


  1. wow.. shocking.. this is very informative

  2. Wow… can you design one for coolpythoncodes.com

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

%d bloggers like this: