How to Create A Favicon From Your Logo

Have you ever been to a website and saw a little icon in your browser tab? That little icon is called a favicon, and it’s a great way to add validity to your website. Most companies utilize a favicon on their website. It’s great for visitors who leave a lot of browser tabs open, hopping from page to page. It makes it easy for them to come back to your site, because they recognize your favicon.

Making a Favicon From Your Logo

One thing that a lot of companies do, is to use a simplified version of their logo as their favicon. This is a great way to give your site a seamless look, while building brand recognition. So how do you do that? You don’t want to cram your entire logo into a favicon, so how do you simplify it and make it work?

Simplifying Your Logo For Use as a Favicon

I’ll use one of my websites as a case study. I own another website, which is rapidly gaining popularity in the design community, called Design Crawl. Design crawl uses a spider as its logo, which is a great iconic image that everyone seems to love. Let’s take a logo at the logo in its entirety, shown below.

designcrawl - Making a Favicon From Your Logo

As you can see, all of that is way too much to be shown as a website’s favicon. The first thing I do is to strip away the typography, leaving just the spider icon. When I designed the logo, I took a lot of these issues into account. For the main logo mark, I designed it so that it would fit a square format. A circular icon is perfect for that, because I can scale it up, using it for Facebook’s, Google+’s and Twitter’s square user profile image. It also makes it work as a favicon, too. This is because a favicon is usually 16px x 16px or 32px x 32px square. Most favicon generators online use a square format, because it just makes sense.

Making a Favicon From Your Logo DC

Reducing Your Logo to Its Main Elements

With the circular icon left, I save it down as a 32px by 32px PNG file, with transparency. Then, I find a favicon generator online, where I can upload the image, giving me a preview of the favicon as it will appear in the browser. Here, I can also tweak the appearance of the favicon, painting in a little more shape or definition, pixel by pixel. Once I am happy with it, I can download it and upload it to my site. Most WordPress themes include a section to upload your favicon by default, making it easy to implement it into your own website. See how the icon is now your favicon?

make a favicon from your logo

Conclusion

It’s not difficult to use your logo as a favicon. You just have to know how to simplify it so that it will work in this tiny format. If you create your logo, with its intended use in mind, then you can adapt it for different formats. Making a favicon from your logo promotes consistency and builds brand recognition through repetition. Were you able to create a favicon from your logo? If you would like help with this, you can contact us and hire us to do it for you.

Save