Online Freelancing Undressed

How Favicons play a major role in online branding of your blog/site

Whenever I bring up the topic of importance of a favicon to the overall online branding strategy to my colleagues. I always get the same question ” Aren’t you taking this branding stuff a little bit too far?”

Usually the answer I give them is “Unless you are not serious about your branding efforts, then you can’t see the point of it!”
It is undisputable that favicons are tiny things in your site or blog, but consitute an eye-catching detail that will make your site to stand-out. From a branding point of view, favicons play an integral role.

Before I go far, if you have no idea what favicons are, they are “labels” or icons that are used to identify a site. One can usually view them on tabs of a browser. you can also view a favicon on toolbar, bookmarks and address bars. The word favicons comes from  favorite icons.

Favicons provide immediate visual identification of their represented sites, this enables super-easy navigation for web users. They are usually images of 16×16 pixels

How will you identify specific sites when browsing with over 50 tabs open?

I presume with the help of favicons, you can identify the sites easily without having to read through the tedious link texts.

There is nothing better than bookmarking a new site in your browser and watch as its favicon struts into place. Conversely, there is nothing worse than bookmarking sites only to discover that they are missing their representative favicons. It actually spoils the aesthetic arrangement icons and sites on your bookmark toolbar, right?

What is the purpose of a favicon?

The main reason for having favicons is majorly to improve user experience. If you are using major hosts for blogs such as WordPress, Blogger and the likes, the probability is that your blog or site shows the favicon for your host.

But what if you want your site to be identified distinctly, you will definitely want to change that, right?

If you would love to establish  a blog and make money from it, check out this detailed step by step guide on how to create a profitable blog in less than 5 minutes. 

How do you create a favicon?

Creating a favicon for your website or blog you need a Masters’ in Graphic Design, PhD in web design and master all the programming and coding packages, Hold up! You didn’t  fall for that, did you?

Creating a favicon is probably the simplest thing you could do, you actually don’t need to a designer to create a favicon for yourself neither do you need to be a tech-savvy.

You can do it in less than five minutes if you use the right tools.
the easiest way is to use sites that generate the favicons for you. Below is a list of few sites that can do the task.

The sites above can provide you with icons of different sizes and qualities, so you can try and see which one suits you.
If you still cant decide on what is best for your site, then try checking out the sites below for some inspiration.

How  to set a favicon to your site

If you are using WordPress, follow the steps below after creating your favicon image to install it.

1. Create FAVICON as *.ico file.
2. Upload your FAVICON to */wordpress/wp-content/themes/inove/img/ directory.
3. Remember no upper case letters, no spaces and only *.ico files.
4. Copy your FAVICON file name (from step No.2).
5. Replace XXX with your FAVICON file name in the following code. <link rel=”shortcut icon” href=”<?php bloginfo(‘template_directory’); ?>/img/XXX.ico” type=”image/x-icon” />
6. Open your theme editor and select Header (header.php)
– wp-admin/theme-editor.php?file=/themes/inove/templates/header.php&theme=iNove&a=te
7. Go to the end of the code. You will see <!– navigation END –>
9. Now drop this line of code – before the <!– navigation END –>
10. Save changes. You will see the FAVICON.
You can also watch this YouTube video if you still cant understand the above directions.

If you are using Blogger, here are the directions .

1. Go to blogger Layout menu item and find the Favicon gadget











2. Select the edit link to bring up the icon selection screen. Click the “Choose File” button to find the created or downloaded “favicon.ico” and press save.









3. Save your layout by pressing the “Save arrangement” button in the Layout screen and Bingo! you are done!!
After refreshing your site or blog page, you will notice that the newly added favicon appears to your blog.

Note: A favicon is a very small image that does not require too much detail. Avoid being fancy on the favicon. A favicon that is indistinguishable is as good as not favicon at all.
You can try using the initial letter of your company’s name in a distinct and creative font. The Google favicon is a perfect example of this. You can also use the logo of you company.

If you take your branding and professionalism as serious as it ought to be, then you should try this immediately you finish reading this article.

Was it easy for you creating a favicon? Let us know in the comments below.  If you need any help, comment and you will get a solution from us immediately.

Article written by:

Omari Alex is the founder of Freelance Nuggets. Learn more about him in the "About" page and connect with him on any of these social media platforms.

Join the discussion

  1. Quennie Belle

    Hello Omari, awesome article! I find it really intriguing and interesting, will surely try those methods if i can get them to work. A big thanks in advance! In case you are open to improvements they will enhance your blogging techniques to maximum potential.

    • Aleky

      Hello Quennnie, am glad you found this article intriguing, you can share it with your friends whom you think will find it beneficial as well.

Comments are now closed.