Create a favicon in less than 5 minutes

What is a favicon?

Favicons are those little images that you see whenever you bookmark or “favorite” a website or web page.  They will appear in your shortcuts or bookmarks menu of your web browser (i.e. Internet Explorer, Firefox, Safari, Opera, etc.) and allow for easy recognition of a certain page, site, or blog that you have bookmarked.  Also, the favicon appears in browsers with tab-based navigation.  The pictures below illustrate how they look and where they appear:

Where favicons appear

Creating a favicon

You want to create your favicon in some type of photo editor like Photoshop, Irfanview, or even Microsoft Publisher.  When designing favicons, you want to be aware of a few things:

• The size: Should be 16 pixels tall by 16 pixels wide (you may also design it as a 32px by 32px square)
• Colors are limited so stay away from photos. With favicons, you only have 256 colors.

Once you have created or found the image that you would like to use, you need to save it as a  “.ico” file with the name “favicon.ico.”  There are also several great sites out there that will do this step for you, Dynamic Drive has a great generator and converter.

Uploading & Installing your favicon

After you have created your favicon, you need to upload it and put a piece of code on your website so it will be displayed.  You will now need to add the code below before the </head> section of your site:

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

After you have put this piece of code before the </head> you will now need to put your favicon in the root section of your site (the main folder where you have your files).

Viewing your new favicon

Often, after you have uploaded your favicon you will not see it displaying in your browser.  The easiest to view it, the easiest thing to do is restart your browser.  Once your browser has restarted, you should now see the favicon when you go to your site.

You’re finished!

That’s it, you’re done.  Simple, easy, and takes less than five minutes to add this cool little image to your site.

No related posts.