How To Create A Favicon – Favicon.ico

Favicon which stands for (favourites icon) is a small square 16×16px icon integrated in blogs and websites. Favicon is displayed next to the address bar in webpages and the links in bookmarks. Favicon gives a personal and graphical feel to the website, users can easily locate bookmarks with the help of favicons.

Example of a Favicon

How to create Favicon

1. Open up your image editing Program, such as Photoshop or Gimp. Create an image that’s 64×64 pixels in size. It should be a simple image, so that it’s instantly recognisable. Save image as a JPG or GIF file

Example of a 64×64 pixel image

2. Convert the image to a favicon.ico file. It must be called exactly this, or the browser won’t recognise it. An easy way to do this is to use The Favicon Generator or any other favicon generator.

3. Save Favicon and make sure you name the file favicon.ico

4. Upload your Favicon.ico file to your website. You must place it into the same directory as your home (index) page, and leave it loose or put it in the images directory or any other folder, but you must include the path to that directory folder within your site.

5. Add the following code to your web site’s HTML. You should put the code after the <title> tag , and make sure the path to the icon is correct, relative to the web page. Code follows:

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

6. Refresh the page  and admire your web site’s beautiful new icon.