How I Created My Custom Favicon

Having built hundreds of websites, I’ve created my fair share of favicons over the years. It’s rare that I actually work on a favicon for more than an hour, but after seeing some of the really cool custom favicons out there, I wanted one of my own for my blog.

I was inspired by a tutorial by Photon Storm, who areĀ famous for their amazing artwork.

favicons

1. Getting Started

I decided to choose a Lego brick as my favicon. Lego bricks have long been associated with website design and development, and I love Legos as well. I was inspired by this icon; while the artwork is rather boring, I really liked the perspective of the image.

inspiration

2. The Outline

I followed the great tutorial linked above that PhotonStorm.com put together, and started by creating an outline based on the Lego image I picked out. It looks a little rough around the edges, but there’s only so much you can fit into a 16×16 pixel area, right?

Screen Shot 2013-08-08 at 3.33.51 PM

3. Filling

Next on the tutorial was filling. I chose these two tones because I’m a fan of redorange. I’m starting to visualize what this is going to look like with shading.

Screen Shot 2013-08-08 at 3.35.35 PM

4. Shading and Highlights

This part of the tutorial was actually pretty easy for me. I put some highlights where I thought the cube should have some reflections/highlights, and put some darker colors around the edges for shadows. I had to play with the colors quite a bit and zoom out to make sure everything looked good at 16×16 pixel size.

Screen Shot 2013-08-08 at 3.38.12 PM

5. Colorizing The Outline

This was the most difficult and time consuming part of the tutorial for me, and I realized this step makes or breaks your design. I used many layers to carefully colorize and fade areas of the outline to look natural. The fact this little Lego brick was so detailed (especially the top area) made this pretty difficult. I frequently went back and forth from actual-size to zoomed-in to make sure the colors looked okay at actual size.

Screen Shot 2013-08-08 at 3.41.19 PM

6. Finishing Touches

There wasn’t a “finishing touches” area of the PhotonStorm.com tutorial, but I felt it needed one. My favicon wasn’t perfect after colorizing the outline, and I went back to touch up parts of the shading, added some more highlighting, and even tweaked the contrast/hue a bit. Here is the finished product:

Screen Shot 2013-08-08 at 3.43.50 PM

Actual size:

Screen Shot 2013-08-08 at 3.54.37 PM

Total creation time: 1 hour 15 minutes

Did you design a favicon after seeing this post? Let’s see it; post in the comments below!

Comments:

Copyright 2017, All rights reserved. Yadda yadda.