Tag Archives: Favicon

A New How-To! How to Create and Use a Favicon

Favicons are the little icon next to your domain name in your browser URL bar. Take a look at the one for Thesis Theme Tools, which is the hammer in our header.

A favicon of your own is a great way to make your site appear more professional and credible.

Creating a favicon is easy, and a new article, “How to Create and Use a Favicon” shows you how to do it. It is fully illustrated and compares the results of two leading favicon generators.

So, take 15 minutes and make your site look like you mean business and create a favicon!

How to Create and Use a Favicon

Favicons are the little icons before the URL in your browser bar. Here’s the one for Thesis Theme Tools:

Figure 1: Thesis Theme Tools Favicon
Figure 1: Thesis Theme Tools Favicon

A favicon of your own is a great way to make your site appear more professional and credible. They are easy to make and use — especially if you already have a good image to work from.

The basic steps for creating and using a favicon are:

  • Go to an online favicon creation site.
  • Draw the favicon or upload an image to be made into a favicon.
  • Download the resulting favicon.ico file.
  • Place the favicon.ico file in your root directory.

This article will show you how to take each one of these steps, and discuss the relative merits of two of my favorite sites for creating favicons.

Online sites for creating favicons

The two favicon sites that I use most frequently are favicon.cc and Dynamic Drive. There are several others, but these two offer the most options and best results of any sites that I have tried.

Drawing a favicon from scratch

The favicon.cc site lets you draw a favicon from scratch and has several tools to help you do so. The following is what their palette and drawing tools look like:

Figure 2: favicon.cc favicon palette and drawing tools
Figure 2: favicon.cc favicon palette and drawing tools

Though it may seem appealing to draw your own, in practice getting that little 16×16 pixel image right is quite a task.

Creating a favicon from an existing image

It’s far easier to start with an image you already have, and if necessary, tweak it. It can be a photo, a drawing you created in a graphics program, or any other suitable image.

Both favicon.cc and Dynamic Drive have facilities for creating a favicon from an image. The procedure is simplicity itself and is the same for both sites: upload your image and hit the “Go” button, then download the constructed favicon.

The difference between the sites lies in the file types and sizes accepted, manipulation of the image while uploading, and most important of all, in the results.

Your image file size and type is an important consideration when deciding which service to use. Favicon.cc supports the jpg, jpeg, gif, png, bmp, and ico file types with the largest file supported being 5 MB. Dynamic Drive accepts gif, jpg, png, and bmp file types with a 150MB maximum file size.

Choosing and preparing your image for uploading to a favicon

Favicons are square and only 16×16 pixels in size. They necessarily leave out a lot of detail, and may take some experimentation before you get a favicon that looks right to you. Here are a few tips for preparing your image for uploading to a favicon:

  • Choose an image that has the important features “framed” by light or dark areas.
  • Choose an image that does not depend on detail to be effective.
  • Choose an image that will get the idea across with a small size and little detail.
  • Choose an image that will fill the favicon square as much as possible.
  • Crop your image to close to square. That will make sure that the details you want are present and the image will not be distorted.
  • Optimize the size of your image if it is too large.
  • Large dark or light areas will come through as light- or dark-colored blobs, so plan accordingly.

Creating a favicon on favicon.cc and Dynamic Drive

Figure 3: favicon.cc's import screen
Figure 3: favicon.cc's import screen

Favicon.cc’s import screen has only a couple of options, but they are important ones: keep the image dimensions or shrink to a square. Keeping the image dimensions will keep the image’s size ratio intact, but may result in a lot of white space. Shrinking the image to a square will fill the favicon square but may distort your image.

Figure 4: Dynamic Drive's FavIcon Generator screen
Figure 4: Dynamic Drive's FavIcon Generator screen

Dynamic Drive’s FavIcon Generator only offers a straight conversion of your image to a favicon, which implies that it will keep the image dimensions. It offers a couple of options for icons, which for favicons are useless. However, it does offer a preview of what your uploaded image will look like as a favicon.

One feature that Favicon.cc has that Dynamic Drive doesn’t is the ability to edit the image after you have uploaded it. This can be a very useful capability, according to what you are trying to do with the favicon.

After you upload your image and are pleased with the results, hit the download button and the favicon.ico file will be downloaded onto your computer.

The results

For this article I have chosen a logo that is a sort of torture test: It is particularly difficult to translate to a favicon because it has large white areas, and depends on details for its characteristics. Which service will do the better job? Here is the original:

Figure 5: Original logo image used to make the example favicon
Figure 5: Original logo image used to make the example favicon

The favicons generated by the two sites are shown below. It’s easy to see that Dynamic Drive’s retains more of the subtleties of the logo and left out far less than did favicon.cc. This has been my experience in creating many favicons for clients.

The bottom line: use favicon.cc for making a favicon from scratch or tweaking an existing one; use Dynamic Drive for creating a favicon from an image.

Figure 6: favicon.cc favicon results enlarged and actual size
Figure 6: favicon.cc favicon results enlarged and actual size
Figure 7: Dynamic Drive favicon results enlarged and actual size
Figure 7: Dynamic Drive favicon results enlarged and actual size

How to use a favicon

Using a favicon is easy. You simply put the favicon.ico file into the root directory of your domain, as illustrated in Figure 8:

Figure 8: Location of the favicon.ico file
Figure 8: Location of the favicon.ico file

Most modern browsers will pick up the favicon immediately and display it in your browser bar. Firefox tends to take a little longer than other browsers to catch on to the favicon’s presence.

Conclusion

I hope you have enjoyed this short article and that it is useful to you. Remember that your comments are always welcome, and that you can email me directly by clicking on the “Contact” button in the menu.

©2009 Michael L Nichols. All rights reserved.

What next?

Your comments are always welcome, and are important to this blog’s community! Leave a comment now, or read the comments.

You can find several related articles in the “Related Articles” list below. In the footer you will find a lists of Popular Posts, Recent Posts, and you may browse by Categories, or tags. There’s also a Google Custom Search box to help you find just what you want.

Get free updates by RSS or email!

If you have enjoyed this article, please consider subscribing to article updates, using an RSS reader, or by email. It’s free and is a great way to make sure you don’t miss a single article! I also invite you to follow me on Twitter!

Why not share this article with others!

Share this article with your friends using your favorite social media service, such as StumbleUpon, or Digg. Check out the icons below under “Share This Article With Others” for other social media, including del.icio.us, Technorati, Sphinn, Friendfeed, FaceBook, MySpace andLinkedIn! You can also email or print the article, and even tweet it using Twitter!