Firstly…What On Earth Is A Favicon?

Would you believe it is a made up word..(really Dee!)

It is combination of two words, ‘favourite’ and ‘icon’, which tends to be pronounced, Fav – eee – con.

It is also known as a Site Icon.

Still none the wiser?

Ok, it is that thingamajig you see in your browser tab, usually a teeny tiny version of your brands logo sitting to the left of a URL

It is square and typical size is 16px X 16px.

And if you don’t have a favicon installed on your blog,  this is how it will look in your browser tab…..which looks pretty lame!

no favicon

Having a favicon helps build your brand awareness and looks way more professional which helps build trust with your audience. When readers have multiple tabs open in their browser it helps identify your site quickly when moving between the tabs.

So Lets Turn Your Favourite Icon Into A Favicon…. In 5mins!

Firstly you need to decide what image you would like to use, ideally select one that is congruent with your brand.

I cropped my FortyPreneur logo to capture the FP symbol, then converted into a favicon using this free tool, Favicon Generator.

I used the transparent format of my logo.

cropping logo

If this works with your logo then you can create your favicon in 2mins!

Otherwise follow the steps below.

Creating Your Own Favicon Step By Step!

An alternative is to create your own favicon, using your favourite photo editing tool, such as photoshop or something as simple as microsoft paint.

The favicon can either be on a transparent or a coloured background.

If you want to create your favicon with a transparent background you can use something like photoshop or Gimp.

Just don’t use a photo of yourself!

Or…. you can always head over to my favourite place to hangout online…Canva!

1. Use Canva Custom Dimension

A favicon should be a square, for this example, I used 512x512.

 

2. Select A Shape & Add Icon Or Letters

 

3. Add Background Colour

Here are a few designs I was playing around with, using my colour scheme.

So let your creative juices flow and start creating a few designs to see which works best for your brand.

4. Then Use A Free Favicon Generator

Favicon Generator

Download your newly converted image which is now a 16x16 favicon before uploading to your blog.

 

5. Adding Your Favicon To Your WordPress Theme

I am a big fan of Elegant Themes and use Divi so I simply go into my epanel and upload my newly converted favicon.

Save and wahla, I now have a favicon for my blog!

However, for those who are not using Elegant Themes or have an epanel,  keep reading..it is super easy since the updated WordPress 4.3.

6. Adding Favicon To WordPress 4.3

i) In your WordPress Dashboard

Go to Appearance> Customise then select Site Identity

ii) Upload your Site Icon..AKA Favicon.

Keep the original size you created in Canva of 512 x 512 px

You do not need to use a favicon generator because WordPress 4.3 will resize your image.

iii) New Favicon is now added to blog and displayed in browser tab!

No code and no tech skills …too easy!

Firstly work out if you can simple crop your existing logo and use a favicon generator.

Or create a favicon from scratch maintaining congruence with your branding using your favourite photo editing tool.

I hope you have found this article helpful and please feel free to leave comments below.

signature