How To Create a Favicon for Your Website
This post was updated on 7th February 2019.
In this blog post I will be looking at what Favicons are and how you can design one for your website. You can see a quick guide below, or browse the full post for a bigger breakdown:
How to Create a Favicon For Your Website - Step-by-Step Guide
- When creating your Favicon, keep the design simple. A predominant letter or icon for your company could work well
- Design your icon on a 512px x 512px transparent canvas in Photoshop
- Zoom in to make sure your design is crisp and sharp
- Save it as a transparent png file
- Find an online tool (realfavicongenerator.net) to generate all the Favicon variations you need
- Select & upload your Favicon image to the online tool
- Adjust the settings for iOS, Android and Windows
- Once you’re happy with your chosen settings, generate your Favicons
- Copy the necessary HTML code and follow the simple instructions to download the Favicon package
- Add the icons and code to 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.
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.
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.
Now, adjust the settings for iOS, Android & Windows 8. Below are the settings I selected for my icon.
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.
Your Favicon collection should look something like this.
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.
And finally, here is an example of one of the icons on an Apple device.