“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.
But, 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.
Many websites are available to create your favicon image from an image that you upload. I suggest you use our website to do this: favicon-icon-generator.com
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.
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.
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.
If 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.
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:
Then navigate to the Favicon Generator menu that has been added to your menu
list. You’ll see the screen shown below:
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
Another favicon generator is favicon-icon-generator.com, 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.
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.
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.