How to make a favicon

Posted on April 10, 2008 at 5:10 am

Looking for a way to create a FavIcon? If you browse the web regularly, you’ve probably noticed that a lot of sites have a small icon that appears in front of the website address in your browser or bookmarks. Many websites use favicons (aka Favorite Icon) as a way to brand their website, so that when you see that icon, you automatically know which company or product it represents.

For example, take a look at your address bar right now and you’ll notice that to the left of URL is a small icon that looks like a grid:

Also, if I look at my Firefox Bookmarks or IE Favorites, I also see the same favicons next to any websites that are using them:

Using a FavIcon for your site is a good practice as it helps visitors to quickly identify your site among large numbers of bookmarks, etc. So how do you go about creating a FavIcon for your site?

How to make a FavIcon

The first step in creating a FavIcon is to actually find a picture or create a graphic that you want to use as your icon. A FavIcon always has a 16×16 pixel dimension, so you should be very careful when choosing or creating your own picture.

Try to find an icon or graphic that has very little going on with it in terms of design. The simpler graphic you can find, the better your FavIcon will turn out. Also, make sure that the graphic is a square, so basically where the length and width are equal. If you have a portrait or landscape picture, it will be resized to 16×16 and therefore become either stretched or squished.

You can also create your own image using Microsoft Paint or similar photo editing software. When you are done, make sure you save the file into GIF, JPG, PNG, or BMP format.

Now that you have your image, go to DynamicDrive and let’s use their FavIcon generator to create our FavIcon from the picture.

Go ahead and browse to the location of your image file and then choose Create Icon.

And really that’s it! You’ll now get a preview of how your FavIcon would look in an actual browser and you can either proceed to download the FavIcon or you can simply choose another image.

What I like about this site is that it also gives you instructions on how to install a FavIcon to your website, which is a little bit harder than actually creating the FavIcon itself. Here’s what you need to do:

First, download the file and then upload the FavIcon, which by the way should be named “FavIcon.ico” to the ROOT directory of your site. It’s very important that the file be named favicon.ico and that it be located in the root directory on your web server. You can verify that you uploaded it correctly by typing

http://mysite.com/favicon.ico

in the browser’s location, where “mysite.com” is your web site’s Internet address. Now you need to insert one line of code into the <HEAD> section of your web sites pages. Note that this code has to be on every page that you want the FavIcon to appear for. This is easy if you have a site that uses templates and pulls in header, footer, and other files individually.

If all of your pages are static and you do not use templates or includes, you’ll have to manually edit the HTML in each page. The line of code you’re going to want to add is as follows:

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

The icon may not show up immediately, so be patient. Also, sometimes it doesn’t appear at all, especially with IE as there is a browser bug.

Hopefully with this short tutorial you have been able to create a FavIcon and get it up and working on your site. If you have any questions, feel free to post a comment! Enjoy!