Quantcast

How to Spice up a Site with a WordPress Favicon

Favicons, for those not familiar with them, is short for “favorites icon.” They are the little icons that appear in the upper left side of the URL bar as well as on tabs. They also show up next to the name of bookmarked sites in people’s bookmark toolbars.

Why have favicons?
Favicons will not make or break a website, but they are a nice little touch. They help a site to become easier to indentify and remember while giving it a bit more of a professional look. Favicons also make it quicker to find a site that has been bookmarked. This offers an advantage both to visitors and to the site owner. Best of all, they are easy to create and install as the following tutorial will demonstrate.

Creating a favicon
A favicon is a 16 x 16 pixels square graphic or picture. You can make one from any picture that is not copyright protected. Those with a bit of artistic skill can also create a graphic, usually with better results than a picture. If it is square (crop it into size if it is not), almost any image will work. For best results, remember:

  • The image must be simple since detail will not show up on a small favicon.
  • Colors need to be contrasting, or they will not be distinguishable.
  • A photo without enough contrast and too much detail may look like a smudge.
  • Make sure it goes with the image of the website.

Once you have the image, there are many favicon generator sites that will convert it into a favicon for you for free. Just make sure it is saved as an .ico file and is named favicon. Therefore, the result will be the file: favicon.ico

A couple of sites that will do it:
http://www.favicongenerator.com/
http://www.faviconr.com/

There are also a number of readymade favicons that can be downloaded from sites to include the following:
http://www.faviconsr.us/

Installing a WordPress favicon

There are different ways to install a favicon. Which is possible will depend on the theme being used. Choose one of the following based on your theme and preferences.

Through the theme
The theme may have a way to install the favicon built in. If this is the case, simply use the theme tools provided to select and upload the favicon.

By file upload
In other themes, it is enough just to upload the favicon to the root directory via FTP. If you are not familiar with FTP, here is a video that will show you how to navigate and use it. With most hosting, the root directory will be a folder named “public_html”. However, if there is more than one site hosted on the service, the root directory will be in a folder, named after the site the favicon will be added to, within the “public_html” folder.

Then, upload another copy of the favicon to the theme’s main folder path /public_html/wp-content/themes/whatever your theme is called.

Once the favicon is uploaded (overwrite the previous one if one was already there), refresh the browser and see if it works. You may need to do a hard refresh by pressing the Ctrl+F5 keys simultaneously. If this does not work, try restarting your computer or clearing the browser’s cache.

If you have any doubts as to whether the favicon was uploaded properly, go to www.YourDomain.com/favicon.ico, and it should show up.

Adding code if necessary
If the favicon is uploaded properly but now showing up next to the URL, it will be necessary to add the code to the header.php code of the theme. This file can be found in the admin panel under Appearance/theme.

The line that begins with “<link” and ends with “ico” />” will need to be replaced with the following:

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

Using plugins
Those unsure about or uncomfortable with editing code should simply use a plugin to install it. Shocking Simple Favicon is one of the most popular for this. Just install the plugin and follow any instructions (making sure favicon path is set correctly). Since the changes the plugin makes are fixed, there will be no need to add the code again even if the theme is changed in the future.

Changing a favicon
Once you have a favicon working, you can change it at any time simply be overwriting the old with another favicon.ico.

Be Sociable, Share!

Working full time from home, I am interested in blogging, online marketing, financial topics and technology. My aim is to constantly build my knowledge of affiliate marketing and related topics while help others in the process by creating online resources that enlighten and inform.

Back to Top