How and Why to Add a Favicon to Your WordPress Site?

Posted by Thomas on October 30, 2014 in Tutorial, Website Building, WordPress

Have you ever wondered about that little image which appears next to a website on a browser’s address bar? This icon is called favicon. Continue reading below as we dive into why you should have a Favicon for your WordPress website and how to create one.

Why should you have a favicon for your website?

The obvious answer is that a favicon looks great next to your website address. It also provides instant recognition. Adding a favicon gives that oomph to your site which would otherwise be missing. The best and most popular sites have favicons because they provide branding opportunity. Websites like Amazon are recognized by their unique and eye catching favicon. It may look like a small addition but it goes a long way in building reputation. Moreover, a favicon appears on the bookmarks which act as a great visual marker. Imagine that someone is searching for your site among zillions of bookmarks. A visually appealing favicon can set you apart from other bookmarked sites. The benefits of having a favicon are many. On the other hand there is no known disadvantage in having one. However, you must exercise caution while creating a favicon for your WordPress website.

Another important reason for having your own favicon is to avoid being seen as an amateur. WordPress themes may display a standard icon if you don’t have your own. Many website hosts have a default icon or favicon. This creates confusion in the mind of viewers. It is therefore essential to create your favicon in order to project a professional image.

creating a favicon

Designing a favicon

While designing a favicon, you must remember that it is your identity on the internet. You can either use your existing logo in a miniature form or design it from scratch. If you are creating a new favicon which is different from your logo, you must ensure that it represents your website and its message. It must lead to instant recognition and leave a lasting impression on viewers.

Since a favicon is extremely small in size you have to keep the design simple. Text is usually not clearly visible in a favicon, unless it contains few letters. A single letter representing your vision and content is difficult to design. WordPress favicon with a single letter ‘W’ provides instant recognition and is an ideal example of a memorable icon. You just need a bit of creativity to come up with a great design for your Favicon and you don’t need an expert designer.

Creating an image for your favicon should be easy. Any image processing software like Photoshop can be used for the purpose. To begin with you can create a larger size image which can facilitate and ease your design effort. Once you are satisfied with the icon, you can resize it to the correct favicon dimension of 16 x 16 pixels. Using Photoshop you can create a gif or png image. The disadvantage of using either of these image formats is incompatibility with some browsers like IE5. It’s therefore recommended that you convert your favicon into an ico format which is compatible with all browsers. Another issue which may crop up while using formats other than ico is 404 not found error. This is because modern browsers look for an ico file. Due to this, the download speed of your index or main page may also drop. Use of ico format is therefore preferred.

If you are not familiar with Photoshop, you can always use online resources for generating Favicon. WordPress users have some fabulous plugins which make the entire process of adding favicon simple. All in One Favicon is a popular plugin for WordPress. Multicons plugin is fairly easy to use and has been downloaded extensively. Captain Favicon is another example of WordPress plugin which can automate installation of Favicon.

Inserting code to display favicon

Once your Favicon is ready and renamed as favicon.ico, you are ready to upload this file. Remember to upload the file to the root directory of WordPress. There are two easy ways to do this – use ftp or navigate to your root folder via your hosting account. There is a possibility that there is an old favicon.ico file in your main folder. You must delete this file before attempting to upload your latest ico file.

The next step in installing your favicon is to insert the code into your WordPress blog/website. You can do this easily by using the editor. You have to modify the header file, header.php using the theme editor. The code to be inserted is simple and can be found in the WordPress codex. You can simply copy the code and paste it into the header.php file. Now you are ready with your favicon. It’s a good coding practice to first copy the entire header file and save it before inserting code. Though the process is simple, you never know what problems you may face later. In such an eventuality, you can always revert back to your original header file.

Precautions while designing and displaying favicons

You must make sure that the dimension of your favicon is 16 x 16 pixels. Other sizes are also possible but this size is ideal. As far as possible your favicon must be in ico format, which is compatible with all modern browsers. Be careful while experimenting with transparencies. Ideally, your favicon should be simple and elegant

Conclusion

A favicon is the miniature face of your website. It is an expression of your creativity and what you stand for. Many of us wish to have our own symbol in the form of a Favicon but are deterred by the imagined difficulty in creating it. To the contrary, creating and displaying favicons is probably one of the simplest procedures. Following the above step by step actions you can be the proud owner of a great icon. WordPress users can add a plugin to automate the process. Some themes have provision to install a favicon.


Comments are closed.