Creating and implementing a Favicon Tutorial

Made by: Nick

In this tutorial I am going to show you how to create your own favicon and make it show up on all the pages of your site.

What is a Favicon?

The favicon is the small image next to the URL in the address bar (as shown below) and next to the title on any tab that is open.

Favicon in the address bar

Why is a Favicon important?

I think a favicon is important as it helps to give your site an identity, a brand almost. For example if the user has a lot of tabs open then they can easily tell which site is which by looking at the favicon (pictures speak louder than words), now if your site doesn't have a favicon the user won't know which is yours. This is only one situation in which I think it is important to have a favicon, but i'm sure there are many other reasons.

Creating the Favicon

Now for this I am going to be using Adobe Photoshop CS3, but you can create the image in any graphics program you like.

The favicon image has to be 16x16px but it is hard to design in such a small space so I suggest making it a bit bigger (for example 64x64px) and scale it down at the end.

You want the image to represent your site in some way, so using your logo is often the best practice.

After creating your image and scaling it down to 16x16px you can either download the .ico plugin from here and save your image as "favicon.ico" (the format needed), or you can save it as a jpg and put it through one of the generators below:

http://www.favicon.co.uk/
http://www.favicon.cc/

Both of these generators do pretty much the same job, so it doesn't really matter which one you use. You just need to upload your jpg image and it will give you an ico in return.

Remember that your favicon has to be named "favicon.ico" for it to work properly.

Making your Favicon show on your site

All you need to do is upload the favicon to the root folder of your website so that it can be found at http:///www.yoursite.com/favicon.ico

After you have uploaded your favicon it should appear in all modern browsers. Some browsers and older versions of some browsers will only display the favicon if you have this code in the head section of your site:

<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico" type="image/x-icon" />

Of course you would need to replace "www.yoursite.com" with your own domain.

If you do not include this then it isn't really a big deal (as most people will use browsers that know where to find it already), but it is always a good idea to put this code in if it doesn't cause you too much hassle, just incase someone is using a browser that doesn't find the favicon on it's own.

So your code structure for every page should be as follows:

<html>
<head>
<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico" type="image/x-icon" />
<title>Free Div Layouts - Favicon Tutorial</title>
/* other header items such as meta tags, link to your style sheet, etc */
</head>
<body>
All your site's content
</body>
</html>

If you do not see your favicon straight away, try deleting your cookies and cashed data in your browser, or just wait a few hours. If you still don't see it then you have done something wrong or you are using a browser that does not support favicon's.

Feed the Dragon MySpace Tutorials