How to Install Favicon on WordPress Blog

The installation of favicon should be an integral part in the creation of a unique website, because it helps to further instill brand recognition on audience. Favicon is the small logo that appears just by the left side of browser when a web page is displayed or loaded.

The beauty of favicon apart from helping to recognize website, is in it capacity to display when bookmarked.

This distinguishes a site from every other ones thereby alleviating the rigors of search if bookmarked among other websites. This is what I call brand identification.

Below are the stages involved in the creation and installation of favicon on a website.
Design a small logo
Favicon come in various sizes e.g. 16×16, 32×32, 48×48, 64×64 and 128×128. The first step in installing favicon is to design a logo in any of the above size on Photoshop, Coreldraw or MS word.

If you don’t know how to design logo on these applications then, you may have to contract the design work to someone else or search for a unique image online.

There are online favicon tool that can also be used for this purpose. They also size images to favicon format. But it is important to create a unique design. This is where unique brand lies.

Convert image file to favicon.ico format
The file format of the logo designed must be converted to favicon.ico. This is important for cross-browser compatibility purposes.

So, you either rename the image file to favicon.ico if it is already in predetermined square size pixel or re-size it to fit to any of the above sizes.

I use html.com to re-size logo meant for favicon purposes. All you need to do after creating the logo is to upload it to the site and click convert. The logo will be converted automatically. Download it to your computer and you are set to upload to your server.

Upload favicon
Use any of your FTP clients (FileZilla or File Manager) to upload the favicon file created to server. Ensure there are no favicon on the root directory and on the theme you want to install this new favicon otherwise, it won’t work. So, make sure the default favicon is deleted both on the root directory and the theme.

Insert code
You’ll need to insert the following code into the header.php of your WordPress editor. To do this, you’ll have to log-in to WordPress admin panel. On the dashboard, click on appearance and select editor. Look for header.php and insert the following code just after where you see this sign <body>

<link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>/favicon.ico" />

If the code is present, you can over-write it. Save after pasting the code and you’re through with favicon installation.

Visit the front end of your website and you will see the logo display on the browser. Sometimes it may take a while before it display especially if one or two mistakes occurred before they are rectified. Just ensure you follow due process and wait for the server to propagate it.

However, you may install All in One Favicon plugin for WordPress and is as good as go to sleep. It shall efficiently do the job on your behalf.

Contact us should you need assistance and don’t forget we can setup a complete WordPress powered website for you absolutely free. Your success is our passion.