Favicons are great little icons that appear on the left of a website URL in your browsers address bar, Favicon's don't seem important and some website won't have them, In my opinion a favicon is just as important as a logo. While it is 16 x 16 in size it gives your website a unique small logo to be identified by, Favicons also appear in favorites and bookmarks, so I think it's important to have one. In this tutorial I will show how create your own favicon, converting a standard image into a .ico and of course getting your Favicon to appear on your website!

What is a Favicon?

Favicons are small icons (usually 16px x 16px in size) that contain reference to something or the name of the website that appears on, you can find them appearing in places like:

Browser URL bar:

Browser Bookmark Menu's:

Even if you haven't heard of the word favicon before im sure many of you would of seen them before.

Why should you have a Favicon?

Although a Favicon seems like a small thing and in a way it is, but that doesn't mean it's not important, if you visit major sites like Google, Yahoo and many others you'll notice they all have small favicon's and one of the main reasons of that is simply branding. Much like the effect of high branded company's such as Nike, Favicons tend to do the same thing but in a different scale. e.g If you saw the favicon for Google you'd instantly recongise it without having to look at the browser page or URL. A Favicon also gives the site a unqiueness to it, and can be used to recongise your site by visitors.

How can you create a favicon?

Creating a favicon doesn't involve some complex graphics program that you have to be qualifed in to use, you can simply create one by using a basic application like paint. Creating a favicon can be done in three easy steps.

Step 1. Creating your Favicon

Choose any kind of photo editing/graphic software and create a 16 px x 16 px document. 16 x 16 is a recommended size without have any issues with image quality, it's best to create at the set size favicons will appear at, otherwise a bigger size could lose image quality. Creating the favicon is basically up to you. For some ideas you could make it say your website title's intials, or you websites image logo.

There's also the alternative to use pre-made favicons if you don't feel your creative enough, some favicon specific sites provide this service. If you want to find a pre-made favicon, scroll down below to find some favicon websites.

Step 2. Saving and converting your favicon

If you've chosen to create your own favicon (Which I recommend you do) then once your happy with your favicon, save the image as .gif, .jpg or .png (there three image formats I recommend) and save it to somewhere accessible like your desktop or documents folder. However your not done yet, once you've saved the favicon in a plain image format it will need to be converted into a file extension called .ico which stands for icon.

Converting your favicon is relatively simple and it can be done by using favicon conversion services on the internet a few I've used before are:

Dynamic Drive's Favicon Generator
Favicon Generator.co.uk
Favicon Generator.com

Which ever service you go with won't matter as the process is the same.

On the frontpage of all of those Favicon sites you should see a form that looks simular to something like this:

Once you've located it you will need to click the browse button and then locate where you saved your image version of your favicon. Once you've located it and specified it in source image box you can then click generate favicon. The process should take maximum of about 5 seconds

A little bit about the conversion process:

The generator basically takes the image of the favicon you have created and copies all of the image properties but removes the image format it's in. Once it's done that it will then write the new .ico format to the image you processed, the image becomes a .ico file and then it is ready to be used as a valid .ico file.

Step 3. Save the .ico version of the favicon and upload it to your webspace!

Once the conversion is done you will see a confirmation message saying it's been successful and it will then show your favicon in a preview state, from here you will need to right click and save the .ico format to someone convient on your PC. Then once you have saved it, go ahead and upload it somewhere within your website (I'd recommended uploading it within the public_html folder or / folder) Now once it's uploaded onto your webspace rename the file to favicon.ico, some conversion websites use scripts that added a string of numbers at the beginning of your favicon file name, so if this is the case go ahead and remove these numbers and simply call it favicon.ico.

Now your ready to add in into your website's pages!

Once you've uploaded and renamed the favicon.ico you are ready to apply the code into your website pages so the favicon shows up. The code is a small one line code that does the job and here it is:

<link rel="shortcut icon" href="http://www.james-blogs.com/favicon.ico" />

(After placing this code, it may take some time for a browser to recongise that a favicon is present, clearing your browsers cache can speed up this process of the favicon being recongised)

I'd recommend that you add in your full URL address as well as the file name and location it is on your website.

This code goes between the head tags of your website pages, but the problem about this code is that if you want your favicon to show up on every page you have to add it over and over again to every page, however if you use coding like php and use php includes you could add this link of code into one of your php includes like so:

<?php include("meta-info.php"); >

Say for example you have a php includes that contains information for your website that goes between the head tags you could simply add your favicon code within that and then wherever that php includes is on your pages the favicon will automatically be shown on whatever page has the include on it.

So there's your three step guide in creating a favicon and placing it on your website!