A Better Looking Favicon

What is a favicon you ask? It’s actually a short term for “favorites Icon”, it is a multi-resolution image you normally see on the address bar right before the http://.. part of the url. What is it for and how does it benefit your website? Simply put, a favicon helps the user remember your site after bookmarking it. Imagine you have about 100 something bookmarks, if you’re looking at them from your browser wouldn’t it be nice if all the bookmarks each had a different icon to represent that particular page you bookmarked?

This is where your site’s favicon comes into play, assuming you have a well designed favicon, your reader will not have a hard time finding your page within their bookmarks. Today I’ll show you how to create your very own favicon using one of my favorite generators.

You will first need an image to turn into a favicon, you can use jpg, gif, bmp, or png file format. Fire up Photoshop or any image editing software, create a 100×100 px box, and place your image inside that box, resize the image if needed. Once you’re done go ahead and save it as a jpg. If you want a favicon with a transparent background, delete the background layer and save the image as a png format.

Now that you have the image saved, we will convert that image into a favicon by going to the site below:
http://tools.dynamicdrive.com/favicon/

Click the browse button and find the image you just saved and click on the Create Icon button. This will turn your image into a 16×16 px favicon. Click the Download Favicon button and save it to your desktop. On your desktop you should see a small image called favicon, we will then need to upload this to your server.

Upload the favicon to the same root where your index file resides, meaning do not upload this image into the images folder, make sure it’s in the main root. To make this appear on your site you will need to insert the following code right before the </head> tag of your index file:

<link rel=”shortcut icon” href=”http://yoursitehere/favicon.ico” />

You should now see your favicon appear next to your url: