Select Page

In the article I’ll tell you how to Add a Favicon to Your Website. Adding a Favicon to your Website in HTML is very simple. Read on to find out how. For anyone who doesn’t know, a Favicon is that little icon you see beside the address bar in your browser on some sites. It is also sometimes called a favourites icon.

Add a Favicon to Your Website

Creating your Icon

To create your Favicon, you need a graphics editor. Microsoft Paint can do the trick, but Paint.NET orThe GIMP are definitely better choices, and are also free to download.

Using one of those programs, create a new file, that is either 16 x 16, 32 x 32, or 64 x 64. It has to be this small for most browsers to accept it, so keep trying different sizes until you get the desired result.

When you have it created, you can either save it as an ICO file (.ico file extension), or you can save it as a BMP or GIF image with 256 colours or less. This is due to the displaying of images on computer monitors.

Converting to an Icon (if necessary)

If you have saved your icon as a BMP or GIF, it will need to be converted to an ICO file. There are plenty of free online image to icon convertors out there. Here is a fantastic list of icon and cursor editors for Windows.

Publishing your Icon

It is now very easy to get your icon working.

Add the following line off code between the and tags of your site:

<link rel="shortcut icon" type="image/x-icon" href="../path-to-icon.ico" />

Now just make sure to clear your browser’s cache so your icon will appear. You can use a different icon on every page if you wish, but usually a global site image looks best. Anyway, it’s that easy! Have fun with your HTML and icon endeavours!