Add a Favicon.ico to Your Site

ARTICLES FOR WEBMASTERS

Add a Favicon.ico to Your Site

By Zabrina Way

Being a successful webmaster is all about paying attention to the little details. One of those often-overlooked little details -- 16 by 16 pixels, to be exact -- is a favicon.ico.

What is a favicon.ico?

A favicon.ico, also known as a favicon, is a small image file that represents a website, much like a logo. The most important thing to remember is that it will be displayed alongside your website's name in a user's favorites menu (this includes "bookmarks" in other browsers). It is also usually displayed in the tab title (if the browser supports tabs) while surfing your site. In some browsers, it is displayed in the URL or location bar, too.

When a user is looking through their favorites, the file you upload as favicon.ico will be displayed next to the name they chose when adding the page as a favorite. This makes it essential to create a memorable, appealing favicon for users to associate with your site.

Dimensions and coding

One universal rule about favicon.ico files is that they always have to have dimensions of 16 x 16 pixels (or 32 x 32 pixels, but 16 x 16 pixels is the standard). The color depth should be 8-bit or 24-bit, and they should be static images; Firefox can display animated .gif files as favicons, but no other major browser can.

Favicons are used in all of the most popular browsers, including Internet Explorer, Firefox, and Opera. In Internet Explorer, the only file format recognized as a favicon is a .ico file. Other browsers recognize .gif, .jpeg, or .png formats, but Internet Explorer still does not recognize these formats. For universal compatibility, it's a good idea to make your favicon a .ico file.

Why a favicon.ico is important to add

A favicon.ico file acts as a logo for your site and represents it. A unique, well-crafted favicon will make it stand out from your competition in a user's favorites menu, many of whom probably have default icons.

The benefits to your site are numerous. For starters, most people will associate it with a greater level of professionalism. Attention to detail is admired by web-savvy users who notice a favicon or lack thereof more easily, and by non-technical users who appreciate the neat little icon that makes your site easier to find in their favorites menu.

One possible benefit of adding a favicon to your site is an increase in traffic. When an average user searches through his favorites menu, his eyes are naturally drawn to pictures. If you have an icon that stands out among the dozens or even hundreds of sites that have the default icon, you're more likely to attract his attention and traffic.

If you have a popular website, a favicon.ico file becomes even more important. The "big names" like Google, Yahoo, and most well-known websites all have favicons to help them stand apart from their competition.

How to create it

Creating a favicon.ico file is easy, even for amateur webmasters. You may easily create yours here.

You can also use any graphic design program, including Photoshop, GIMP, or Paint to create your favicon. If you're looking for a clean, professional look, it's probably better to use a more advanced application. If you don't have those programs or the budget for them, you can experiment with different programs.

When it's time to actually create the favicon, make sure the canvas or image size is 16 x 16 pixels, and then be creative!

There are also websites you can visit that will create a favicon.ico file, already saved in the correct format, for you. A simple search for "create favicon online" will yield several of these sites.

Once you have created a favicon.ico file, you simply upload it to the root directory and add these two lines of coding to your webpage, making sure they go into the <head> section of your coding.

These lines will ensure that the user's browser knows that a favicon exists for your page.

If you want to be absolutely sure that your icon will be displayed, upload the same icon in .jpg, .gif, and .png formats (the filenames should be favicon.jpg, favicon.gif, and favicon.png). They also go in the root directory and ensure that the browser will display one of these files rather than the default.

A favicon.ico might be small, but it can make a big difference on the success of your site and how the general public, particularly the web-savvy community, perceives you.

Add comment