So what is this Favicon? A Favicon is a little icon that appears before the website title or page title in your browser! While this is quite a little icon in the size, usually 16×16 pixels or 32×32 pixels, it creates quite a big effect in branding.
Favicon can be very useful to make your website stand out when people bookmark your site (along a list of other sites), and also when your readers have many tabs opened.
A Favicon also helps it easy for your readers to identify your website. Initially you might think that what this little icon will do to make people remember your website.
But over the time if you analyse your own reaction on the favicon of other sites that you are using on a regular basis, you will know people will associate your site with that little icon no matter how crowded their tab is or how long their bookmark list is.
I found that I’ve become quite efficient over the time in identifying websites with their favicon – for the websites that I visit on a regular basis, it is easy for me to distinguish them in my browser.
My eyes and brain are somehow “trained” to associate a website with that little icon on top.
If you are having a website and if you are not using a Favicon, you are missing out!
A favicon can help you build your branding, can improve user experience (people will be less annoyed if they don’t have to work too hard to find your website from a bunch of others).
So how to create a Favicon first?
Your favicon is not a regular image file. It is a .ico file. Only image files with the .ico extension will be accepted as a favicon by most themes. But there are also certain themes that accept any image file like a jpg or a png file.
You have to make sure that the favicon image you create is a square.
The precise size for a favicon is usually 16×16 pixels or 32×32 piles. But you can create a 100×100 pixel sized image and choose to resize it.
But the drawback in the latter case is that the larger image will be re-sized – and since favicon is a very little icon, something you create on a 100×100 pixel size and resize to 16×16 pixels will lose visibility.
If you have any text or a logo, and if you resize it from a larger image it will not look clear and concise in the resized version.
So it is better to choose either 16×16 pixels or 32×32 pixels.
There are various websites that help with creating a favicon. Some of them are:
Of these the first one is my favorite (for no reason) – yours could be different. Go to any of the sites above and upload your jpg or png file. You will get the corresponding .ico file.
How to put the Favicon to use?
Now that you have your favicon, it is time to use it on your site. There are various ways to do it, depending upon the theme you are using. Let’s see some of the possibilities below!
Editing your header.php file
Just add the following piece of code into your header.php file
Also make sure you have uploaded the favicon file you created into your site’s root folder (if you are not sure if you have done it right, ideally, you should able to check it by typing this url > http://www.yoursite.com/favicon.ico – if you see your favicon image, then you have uploaded it correctly.
What if you can’t access header.php?
For some themes like Genesis child themes, you cannot see the header.php. In that case, you need to go to Genesis > Theme Settings in your WordPress dashboard.
Ideally for any theme other than Genesis, you need to go to the theme settings page.
Look for Header and Footer scripts. You will find a box where you can insert codes and/or scripts that would output to wp_head().
I would use plugins as the last option, because installing a plugin just for the sake of adding favicon to your site is not an effective choice.
But if you are not very used to adding codes and stuff, plugins are your best friends.
Here are some plugins that will help you do the job:
The Simplest Favicon – It’s really that simple.
Genie WP Favicon – Helps adding a favicon to your WordPress website.
Very Simple Favicon Manager – Helps you set a favicon and a home screen icon for your website.
Now that you know how to create and add a favicon to your site, do it NOW.
If you are not using a favicon in this era you are missing out.
Let me know if you have any questions!