Creating a Favicon

So you've just finished creating your website and you realized that you've forgotten one tiny but pretty valuable idea. Your favicon, or favorites icon is blank at the moment. This small detail can help your visitors visually recognize your site when they bookmark you or visit your site and look at the URL bar. You can see our favicon above, the black explosion.

Creating a favicon is no easy task... and if we stuck to that statement, we would be liars. A favicon is only a 16 x 16 pixel image that represents your website or is your logo. In order to have a favicon, this image must be saved with the document name: favicon.ico in the root of your server.

How to Create a Favicon

Lets get to it. There are two ways to create a favicon. There are sites like or that allow you to drop your image in and when done, the site saves it as favicon.ico. But really... that's the easy way out.

It is better to have yourself an image editing program such as Photoshop or Gimp that allows you to save your graphic with a .ico extension. This way you are sure of how clear it is and can change it at any other time.

Create A Favicon

So all you need to do is 1. Have a clear image or graphic that when downsized is just as clear as when it is big. 2. Resize your image to 16 x 16 pixels. 3. Save your file as favicon.ico. 4. Go to your root directory on your server and upload your favicon to that space.

Do not be worried if the icon does not appear automatically. It occasionally takes time for a server to recognize your icon. First refresh your browser, and if that does not work, clear your browser's cache. If all fails restart your browser. If that fails, you may have still placed it in the wrong area.

Find the Location of a Favicon

To easy way to find the location of a favicon, (IF you are using the Firefox browser) is to right click a random image, choose View Image Info from the dropdown and scroll up the list to the top. Click that and you should get a location with the containing folder of the favicon.

Another way is to look at the page source of a webpage. To include the favicon, the code below is inserted in the section. If your favicon does not show up, place this code in the head, with the directory included.

So it is simple to place your icon. However, in programs like Wordpress or Magento, favicon areas are already designated. In Wordpress, drop the favicon file into your current theme's folder, as well as the root directory or your site. In Magento, they hide the Magento favicon in the skin folder.

Happy Favicon-ing!

Add comment

Security code


Visit Betfair Review