Add And Use A Favicon On Your WordPress Website For Easy Branding

WordPress Favicon Image“What is a favicon?” We’ve all seen them and we probably don’t really notice them for the most part. But, I can tell you from experience that when you are building websites for clients, putting a favicon in is the final touch that will get noticed by your clients.

I was building a website for an author about two years ago and when I revealed the website to her, the thing that impressed her the most (besides all the oohhhh’ing and aaahhhh’ing over the website) was, “You even put that little image in the browser window. How did you do that?” Turned out, her previous six website designers (each designing a different website for her) had never bothered to do that. She thought it was classy and thought only the “big websites” could have those.

Featured Plugin - WordPress Newsletter Plugin

Now there's no need to pay for a third party service to sign up, manage and send beautiful email newsletters to your subscriber base - this plugin has got the lot.
Find out more

WPMU WordPress FaviconBut, what is a favicon? A favicon (short for favorites icon), also known as a shortcut icon, website icon, URL icon, or bookmark icon, is a 16×16 or 32×32 pixel square icon associated with a particular website or webpage. It appears in the browser tab like the one here on wpmu.org (shown at left).

A favicon can be added to a website by several methods – by adding code to your theme files or by using a plugin. Many times, you must create the favicon off-site and then upload it to your hosting account for it to be used.

How Can I Create My Favicon?

Many websites are available to create your favicon image from an image that you upload. A few that I’ve seen are:
Dynamic Drive – Favicon Generator
Favicon Generator
Favicon.cc
Favico
Favicon Generator
Favicon Generator & Gallery

The last one has a gallery of user generated favicons that you can view if you need some inspiration to create your own. Because a favicon is only 16 pixels wide by 16 pixels high, that only gives you 256 pixels to work with, so your original image can’t be too complex or your favicon will not be readable. In fact, in most cases, simpler is better. Look at the favicons for the favicon generator websites themselves – they are very simple.

Adding A Favicon Without A Plugin

O.K. now you’ve created your favicon – what are you going to do with it?

It’s actually pretty easy to make your favicon appear to your visitors without a plugin. You will find several articles around the web suggesting that you add all the following lines of code to your section:
<link rel=”shortcut icon” href=”http://www.domain.com/favicon.ico” type=”image/x-icon” />
<link rel=”icon” href=”http://www.domain.com/favicon.ico” type=”image/x-icon” />

However, this is a bit redundant, as most modern compliant browsers will ignore the “shortcut” term and interpret the “icon” term properly. So, the only line you really need to add to your <head> is the second line for “icon”. Your code should look like this:


<link rel=”icon” href=”http://www.favicon.co.uk/favicon.ico” type=”image/x-icon” />

Fellow WPMU.org author Tom Ewer wrote an excellent Daily Tip this past February if you want to learn a little more about adding a favicon without using a plugin.

Adding A Favicon With A Plugin

Once again, you’ve created your Favicon, but you’re just not quite up to the task of adding anything to the code on your website. What are your options?

Well…there’s a plugin for that.

First, determine the theme that your website it built with because there may be a specific plugin to accomplish this. A perfect example if the Genesis framework which has it’s own Genesis Favicon plugin. If your theme is a WooTheme, then the ability to upload a favicon is a part of the theme already. Just watch this YouTube video to learn how to upload your favicon.

A WordPress FaviconIf your theme framework doesn’t support favicon upload directly or through a specific plugin, give All In One Favicon a quick try. After you’ve installed and activated the plugin, simply go to the settings page and either upload your favicon or input the link to the location you’ve uploaded your favicon. Save and you should see the favicon in your browser window the next time you visit the website (assuming you either clear your cache or you don’t use your browser cache.

Featured Plugin - WordPress Pop-Up Chat Plugin

No javascript required, no third part chat engine, just fully featured chat right in your own database on your own WP sites - couldn't be easier.
Find out more

Using A Plugin To Create And Add the Favicon

If either of the above methods just seem a little more hassle than you want to be involved with, consider using the Favicon Generator plugin available in the WordPress repository.

Once you’ve uploaded the plugin to your website and activated it, you’ll need to CHMOD the following directories to 777:

domain.com/wp-content/plugins/favicon-generator
domain.com/wp-content/plugins/favicon-generator/uploads

Then navigate to the Favicon Generator menu that has been added to your menu list. You’ll see the screen shown below:
Favicon Generator ‹ WordPress

From this screen, you can upload one (or multiple) images to convert to favicons and choose one to use. While the plugin denotes that you can use JPG, JPEG, GIF, and PNG images, I was unable to get a PNG image to successfully render as a favicon. However, JPG’s worked perfectly. Also, note that you’ll have to have the GD2 library configured in your PHP application. As your host if you’re not sure about this.

The really slick feature of using this plugin is that you can periodically change your favicon if you are so inclined. While your favicon should be a key component of your website branding, there may be applications for a periodic changing favicon.

Featured Plugin - WordPress Membership Site Plugin

If you're thinking about starting a paid, or just private, membership site then this is truly the plugin you've been looking for. Easy to use, massively configurable and ready to go out of the box!
Find out more

Another favicon generator is WSA Favicon, but you may not be able to run it because it requires Imagick to provide all its functionality. Imagick is generally NOT installed with Apache, so you will probably not have it. Since it requires a complete recompile of Apache, most hosts will not be interested in installing it for you. The documentation states that it gracefully falls back to GD, but when I tested this I didn’t get that option.

Randomly Change Your Favicon Image – For Fun Or Effect

When looking at the Favicon Generator above, I mentioned the ability to periodically change your favicon image, but that is a manual change that you would have to do yourself. If you feel your website branding could be enhanced by a changing favicon, or you just think it’s a cool idea, you will want to consider using the Favicon Rotator plugin. This plugin allows you to load up multiple favicons and randomly change the favicon that is displayed each time a page loads for your website. So far, I’ve not had a user for this with my clients, but I do think it’s an interesting idea.

Featured Plugin - WordPress Facebook Plugin

Would you like to add Facebook comments, registration, 'Like' buttons and autoposting to your WP site? Well, The Ultimate Facebook plugin has got that all covered!
Find out more

How do you put favicons on your website? Do you create them in PhotoShop and then upload them manually? Do you use WordPress Plugins? Post your comments below and share your ideas with us about how you use favicons on your WordPress websites.

photo credit: ideacreamanuelaPps via photo pin cc
photo credit: keli shiny-penny via photo pin cc

Comments (2)

  1. The rel attribute, like the html class attribute, allows you to use multiple values within it’s value while each one is treated equally, separated only by spaces. rel=”shortcut icon” means that it’s the “shortcut” *and* the “icon”. This is the more universal method of getting a favicon to appear. You don’t need to duplicate the line again with only the “icon” value.

Participate