Advertisement
  1. Code
  2. Theme Development
Code

Understanding the WordPress Favicon

by
Difficulty:IntermediateLength:MediumLanguages:

WordPress is the most popular blogging platform, but it still has a multitude of features which may represent somewhat of a mystery to its users.

This article will focus on the WordPress favicon, which is an icon associated with a website, used when that website is bookmarked. This small icon, 16 pixels by 16 pixels, is shown next to a website's URL in the address bar of an Internet browser or as an icon for Internet shortcuts on your desktop or other folders.

The favicon, short for favorites icon, is a visual identifier for a certain web page.

Following you will find useful information on the favicon, its benefits, the designing and installation process, and all the advantages it provides to WordPress users.


Benefits of Using the Favicon

There are several benefits WordPress users can achieve from using a favicon. Firstly, this little icon makes a website stand out amongst the multitude of websites thus making people remember your website easily.

Most WordPress websites have a standard favicon, which makes it difficult to differentiate amongst the websites this platform supports.

A favicon gives your website the personality it needs in order to shine.

Secondly, a favicon is a powerful branding tool that can help your website rank better in search engines. This benefit can end up directing more traffic to your web page. Just like a logo and a name, a favicon adds to the professional image you portray in front of your customers.

If you are serious about your business and the professionalism of your WordPress website, then a favicon is definitely a feature you should take into consideration.

Thirdly, on browsers that support "tabbed browsing", such as Firefox, Google Chrome, and the majority of other commonly used browsers, the favicon helps the user identify which tab has which website, making surfing the Internet a lot easier.

This visual reminder is another thing that can help visitors remember your website and which will prompt them to come back time and time again.


How to Create a Favicon

There are various ways of creating a favicon. One option is to use a graphics program that allows you to save files with a .ico extension, such as The GIMP, Corel Draw or Photoshop. Even MS Paint can be used in order to create a favicon!

The perfect program for you simply depends on which of them you are more familiar with.

In general, regardless of the graphics program you ultimately choose, you will need to download a plugin that can help you save a file in the .ico format.

After downloading and installing the plugin, you can begin creating your favicon. If you already have a logo for your website, you could try resizing it to the favicon dimensions of 16x16 pixels to see how it looks.

If the look is not what you had in mind, you will have to start fresh and create a new image. Try using the colors already present on your website, in order to make it match. Do not over do it; consider the small size of the icon and try to keep the design as simple as possible. Nonetheless, you still have to make sure that the image is somewhat representative of your web page. This will help visitors better connect the favicon to your brand.

If you are not too confident on your designing skills, you can definitely hire someone to create the favicon for you. However, this is usually not worth the investment as with a few trials and errors, you can certainly come up with an icon you will be satisfied with. It might take a few tries, but in the end, you will surely create the perfect favicon for your web page.

16x16 pixels is quite a small canvas to work on, so you could consider starting with a larger one that will allow you to use your creativity and resizing it to the right dimensions once you have completed the image.

When reducing an image to the favicon dimensions of 16 pixels by 16 pixels, you have to make sure that the image does not come up blurry because this tends to happen quite often when resizing a photo.

To help you with this, graphics programs usually have tools that allow you to adjust the sharpness of a picture. Make sure you use them in order to obtain an image as clear as possible. After you have created an icon you like save it as "favicon.ico" on your computer.

Another option you have of creating a favicon is by using an online service, such as ConvertICO.org, that allows you to come up with a 24bit icon with a transparent background, completely free of charge. Every such online service comes along with instructions you need to follow to create your favicon. Read them thoroughly before starting working on the icon. After you have finished with the process, you can simply download the image to your computer, from where you can upload it to your WordPress web page.

The two options presented above described creating favicons with the .ico format. However, you can also use images that have a .gif or .png extension, as long as they adhere to the 16 pixels by 16 pixels standard.

Nonetheless, the .ico format offers several advantages in comparison to these two formats. .ico images are supported by all browsers, are less prone to generating errors, and an .ico file can hold more than one icon.


How to Install a Favicon

Once again, you have more than one way of installing a favicon on your WordPress website. There are various plugins you can install that can do it for you, or you can choose to set up the favicon yourself. The manual process of installing a favicon is not too difficult once you get the hang of it, so a plugin is not really a must in this situation.

First, you have to upload the favicon image you have created from your computer to your website. In order to upload the favicon, you have to use a FTP client, such as FileZilla, which will load the icon into your theme's main folder. Additionally, you should also upload a copy of the favicon into the main directory of your website, which will display the icon in your subscribers' feedreaders.

If you already have another favicon in place, you should make sure you delete it before you upload the new one or otherwise it will not work. In order to delete the old favicon, you should locate it in your current theme's main folder and remove it using an FTP client. Make sure that the old or the default favicon is deleted from both the theme and the root directory.


Working With Older Browsers

For the favicon to appear on old browsers, there is an editing process you will have to undergo.

Firstly, log onto your account and go to the WordPress Dashboard. Next, click on Appearance. Following that, click on the link that says "Editor". There, you have to select a file that is called "Header (header.php)" in order to edit it.

While in the header file, look for a line of the code that begins with <link rel="shortcut icon" and ends with /favicon.ico" />. In case it already exists, overwrite it with the new code. Otherwise, under the <head> HTML tag, insert the following code:

To make the changes active and to ensure that your favicon will pop up in the address bar, make sure you click save.

In order to make sure everything is okay, visit your web page's front end to see if the favicon displays properly on the address bar next to your website's URL. In some cases, it might take a while before the new favicon pops up, so be patient.

If the favicon still does not appear, redo the steps to check if you have missed something. Anytime you want to install a new favicon, you should follow the steps presented above.

Of course, if this seems like too much of a hassle, you always have the other option of using a plugin to do it for you, as there are several available out there.


Conclusion

A favicon is just one of many marketing techniques websites use to brand themselves and, until now, its importance has somewhat been overlooked.

Using a favicon can make your web page stand out amongst millions of other WordPress users who simply use the basic icon. Favicons are easy to create and install, they are completely free to use, and, most importantly, they can help make your WordPress website a lot more successful.

Because of this, the favicon is one marketing strategy that no WordPress user should overlook.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.