What is a favicon and how to add one in 10 minutes

Pencil standing out

A favicon (pronounced FAH-vah-cohn) is the little logo icon that appears in your browser tabs and help you stand out from the crowd. They enable users to quickly work out which site is yours when they have lots of tabs open. They are also displayed in your bookmark list.

Example of favicons

The more tabs you have open at once the more important it is. Here is an example of one of my browser windows where I can no longer read the text and I have to rely on the favicon to work out which tab I want to go to.

Many favicons in a browser

 

Why you need a favicon

To improve the user experience

They are little, but at the same time important. If someone has opened or bookmarked your site, a favicon will help them recognise it and find their way back to it.
How many times have you left a website open because you want to buy something but you don’t have time to do it right then and there? I know I have. Perhaps you are comparing prices or services and have a few different tabs open.

Branding

From a branding point of view these are one of the simplest ways to raise your brand awareness

They are one of the little things that are easy to implement and it’s attention to detail like this that helps your site stand out from your competitors. They add polish and professionalism to your site which helps you build trust.

If you don’t have one, your site will show a generic browser symbol or perhaps the favicon of the CMS that you are using.

 

Create one now!

Favicon are tiny. Most logos are too big to be used so you need to use your brands initials or perhaps a symbol if your brand has one that is recognisable.

Outsource

Go on to fiver and search favicon. Just under $7 will get you a favicon created from your logo by a designer.

Build your own

If you have 10 minutes and just want something simple, have a go yourself.
If you don’t have a graphic design tool like Photoshop you can use Canva to create one – its free.

I didn’t have a symbol in my logo that I could use for Clarity By Design, so I decided to just use the initials of my brand, ‘cbd’. For my first favicon I used Canva to create a new design using the ‘Logo’ template.

Creating favicon in Canva
Make sure you use your font and colours for consistent branding. I’m not that creative, but get your creative juices flowing by all means – just remember simple is good because it is going to become really tiny.

Download your design using the recommended format (png).

I then use Favic-o-matic to convert the image into the different sizes. The beauty of using this tool is that in addition to creating your favicon, the tool also creates versions that you can use for tile icons on touch devices and Windows 8 interfaces. Here are the Favic-o-matic settings that I used:

Favicomatic settings

Upload the png that you downloaded from Canva and your favicon and tile images will automatically download.

You may need to try a few designs as I found some of mine were really hard to read at such a small size. Simple really is best.

Add it to your website

WordPress

I have a WordPress site and use X Theme. In the customiser I can very simply add my icons. Look up how to add site icons or favicon for your theme as they will all be a little different.

X Theme icons

Other Content management systems (Eg Sqarespace, Shopify, Weebly, Wix)

Check with your theme to see if it supports the simple uploading of favicons. If it doesn’t you will need to look up the manual instructions for the CMS that you use. You will also need to check what format and size it requires.

Here are some shortcut links if you use these hosted CMSs:

How to add a favicon in Squarespace

How to add a favicon in Wix

How to add a favicon in Shopify

 

Stand out from the crowd

Yay. Hopefully now your website isn’t going to be lost is someone’s sea of browser tabs.  If you need more help bridging the gap between IT and business and mastering your website with easy to understand explanations, subscribe below to receive notifications when I post new articles. Lets get your website performing for your business today!!

Related Posts