How To Create a Favicon for Your Website

2 October, 2015

In this blog post I will be looking at what Favicons are and how you can design one for your website.

What is a Favicon?

A favicon (short for favourite icon) is a small square image that is associated with a website. Favicons are typically displayed by a web browser in the address bar, browser tabs, website history and bookmarks lists; as well as other places depending on the browser & device you are using.

A good Favicon is very important as it presents a way to display your brand in a very compact space. As you can see with the examples below, these brands are instantly recognisable just from their Favicon designs.

The Evoluted favicon looks pixelated next to the others. This is because the favicon is designed at 16px by 16px, but this screen grab is taken from a retina display. I thought this issue would be a good opportunity to update it and demonstrate the process of creating a favicon that will look smooth on all devices & displays.

The previous Evoluted favicon, along with some other recognisable favicons

Designing your Favicon

When creating your favicon, it is important to keep the design very simple. If your company or website branding has a suitable icon, or predominant letter, then that would work well. I would recommend avoiding imagery, full brand names or wording. I will be using the Evoluted "flower" icon again for this example.

I suggest designing your icon on a 512px by 512px transparent canvas in Photoshop, before saving it as a transparent png file. I chose 512px by 512px as it breaks down well to the common Favicon sizes. Make sure that you zoom in to check that your design is crisp & sharp. If your design is pixelated or poor quality, then you will likely get poor results when you create your favicon files.

My icon design in photoshop

Once I have the PNG file, I will use an online tool called "realfavicongenerator.net" to generate all the Favicon variations that I need. There are many different favicon generators available, but I found realfavicongenerator.net very quick & simple to use. It generated good quality icons at all the different sizes that you could possibly require. These include icons for various for iOS, Android & Windows 8 devices too. Many of the other favicon generators only have basic 32×32 and 16×16 options available, whilst some others have poor results when it comes to the automatic resizing.

First, select & upload your favicon image.

Select your icon file

Now, adjust the settings for iOS, Android & Windows 8. Below are the settings I selected for my icon.

adjust settings

Once you are happy with the settings you have chosen, you can generate your Favicons & get the necessary HTML code. From here you should be able to follow the simple instructions to download your Favicon package, then add the icons and code to your site.

Favicon HTML code

Your Favicon collection should look something like this.

Favicon Files

Here is the original Favicon (top image) compared to the new Favicon I have created (bottom image). The difference is only subtle, but you can tell the new one is sharper.

Final Favicon

And finally, here is an example of one of the icons on an Apple device.

iPhone touch icon

Written by Will

Creative Director Will has been with Evoluted since 2009. In his role leading the design team, he continues put his extensive experience to use on an impressively-diverse array of websites.. Will’s core skills include UX design, creative direction and responsive web design; whilst he’s also earned a renowned reputation as Evoluted’s chief provider of internal, novelty animated gifs.

Up next…
Key Highlights From Brighton SEO 2015
21 September, 2015

1 Comment

Reseau Solutions
16th October 2017 at 9:16am

Nice post, I really like your post because Lots of people do not pay attention to favicons, it is very important. Thanks for sharing because you told how to make a favicon.

Post reply

Leave a comment

Replying to: - Cancel