The Importance of Having a Favicon and How to Get One on a WordPress Website

Michael Gabriel (239 Posts)

Michael Gabriel L. Sumastre is the owner of TheFinestWriter.com. He is a freelance technology writer, technical writer and tech blogger for hire since 2005. He has written more than a thousand articles related to tech and gadgets, cloud computing, IT management, SEO, SEM and software solutions. He ghostwrites books / e-books and has a Bachelor of Science degree in computer science. He knows how to code. Michael is also an expert in webmastering and loves to ride his sportsbike. He maintains his portfolio and personal blog at TheFinestWriter.com Author's Website: http://www.thefinestwriter.com


favicon example

Favicons as displayed on websites

A favicon is a small image that appears on the left side of the webpage’s tab title. Some people call it a Web page icon or a website icon.

The Importance of Having Favicons

The favicon is a great way for people to remember your site easily when they save it. This is because it shows up not only on the address bar but also next to the bookmarks.  Instead of just seeing the title of the webpage, they can see your favicon, which could be your company’s logo, brand identity or colors, or just about any graphic that you choose.

It can help your visitors determine which tab contains your site if they open too many tabs in a browser.

And it can also help you with your branding.  For example, you can have several microsites for your different products and time them all together with your company logo as a favicon.

What’s more, a favicon conveys the idea that you have put in extra effort to your site by customizing it.  If you do not have a favicon file, your browser shows the generic blank white paper icon, making it look like the rest and gives it an unprofessional feel.

Lastly, having a favicon can help you keep your error logs cleaner because you do not get those favicon.ico error messages coming in.

How to put it in a WordPress Blog

With that being said, how do you put a favicon on your WordPress site?  Here are the reminders you need to take note of:

1. Creating the favicon

a.     Keep it small.  A favicon is a graphic file that measures 16 pixels all around and has an .ico extension.

b.     Keep it simple.  Having such a small canvas, you would need to keep your favicon simple.  Letters or simple images are preferred to ensure that they display well and your visitors would be able to decipher them.

c.     Keep your branding in mind.  The easiest way to translate your branding to your favicon is to use your own colors in it.  A good trick is to apply the same colors you used on your website. This way your visitors would be able to “connect” or associate your favicon with your site.

d.     Use tools.  There are a lot of free online services that can convert a JPG or GIF file into an ICO file.  For best results, however, you can use MS Paint to create a 32 x 32 pixels image before having it converted into an ICO file.  You can use Photoshop for the same purpose, but you would need to install a Windows Icon Photoshop Plugin.  Furthermore, you could use The GIMP if you do not have Photoshop.

 

2.    Putting a favicon on your WordPress Blog

You can upload the favicon file to your current theme’s main folder through FTP.  This will show your favicon on the browser and bookmarks of your site’s visitors.  If you want your favicon to display on their feedreaders, you should also upload the same file to the home directory of your website.

Tips:

  • You may need to delete an existing favicon before you upload a new one.
  • If you are having problems with your icon showing up on older browsers, visit your admin panel and tweak your WordPress page header. From there, click Design and then Theme Editor.  Look for the header file and insert this code into the HTML tag:

<link rel=”shortcut icon” href=”<?php bloginfo(‘stylesheet_directory’); ?>/favicon.ico” />

 

Or you must find the line that goes:

<link rel=”shortcut icon” … /favicon.ico” />

and overwrite it with the first code as shown above.

  • While you can use a PNG or GIF file, it is highly recommended to use an ICO file because it is widely compatible with older browsers.

 

3.    Using a plugin.

As with any other functionality on WordPress, there are plugins available that make creating and installing a favicon to your WordPress site even simpler.  You could skip all of number two and make favicons a breeze.  Check out plugins such as All In One Favicon.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>