How to Make a Favicon for Your Website

Ever wonder how those little icons get up in the address bar of your browser (pictured below).  Well, it's actually pretty easy to do, and it really ads a professional flavor to your site.  It also helps with brand awareness.  Many RSS readers will also pull in the favicon with your feed making your feed more identifiable among others on a page.

What does "favicon" mean? It means favorite icon.  They were originally made to be custom graphics used when people added a site to their browser favorites.  Distinct icons make it easier to find what you want when digging though a long list of links.

So how do you make one? Lets use the iCast Limited logo as an example.  We took what we call our pinwheel off of our logo and made it into a complete circle.  So that was the base from which our favicon was derived.

The specs for a favicon are that they must be 16x16 or 32x32 in dimension.  Most often, the browser will simply size down a 32x32 to the size needed to fit the bowser.  Generally speaking, a 16x16 favicon is restricted to 16 colors.  A 32x32 may be up to 256 colors.  However, it is always smarter to develope your art to the lowest common denominator.  So stick to the 16x16 with 16 colors if you can.

The favicon file format.  Once you have your favicon designed, there is a very specific file format that you must save the art as.  It cannot simply be a jpg or gif.  The favicon needs to be saved as a .ico file.  Also, the file must be named favicon.ico.  That's required.

There are numerous free applications out there that will save your file in the .ico file format.  Easyicons 98 is a simple free program.  There's also this site where you simply upload the file you want to use and it converts the file to an .ico.  It also renders an animated version if you want to use that instead.

If you are using Photoshop, there's also a free plugin you can install.  That way you can use Photoshop to save a .ico file.

Publishing your favicon. The last step is to upload and launch your favicon.  The first thing you need to do is upload your favicon to your server.  It is best if you upload the file to the root level of your site.  In other words, upload it to the highest level you have, ususally where your index page is located.  Try to avoid burrying it in a deeper folder.

Then a little bit of code.  Many browers will instantly find your favicon once you upload it.  Others need a little help in the form of a meta tag that points to your favicon.  Here's the code:

<link rel="shortcut icon" href="favicon.ico" >

Or the full path:

<link rel="shortcut icon" href="" >

Place the code above between your <head>   </head> tags.  The href="favicon.ico" part is the path to where you have your favicon saved.  So you may want to make it an absolute path by changing it to href="". If you do decide to save your favicon somewhere else, simply change the address to reflect its location.

That's it! Once you place the code and upload the file, refresh your browser and you should see the icon up there.  You may have to clear your browser cache or close out and reopen.  From then on, you will see it up there.  Enjoy!