ARTICLES FOR WEBMASTERS  

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.

<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

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.


Comments to this article


Robisan (2014:02:28 04:59) Clear, simple and immediate!! Thank you so much!!!

md.arif uddin (2013:12:09 14:34) nice and helpful article i like it

Eric (2013:11:15 11:06) Update: works fine at Firefox after a browser restart, good to know.

Eric (2013:11:14 14:10) Thanks for the code, it works fine at I.E., but Firefox not so much. And functioning at two of three webhosters Angelfire & Netfirms, but not at Webnames as well.

vivek (2013:07:26 14:12) thanks bro..it works...

Sachin Jade (2013:05:17 03:28) Done!! works perfectly...Many thanks :)

Kate (2013:03:05 02:06) Success - many thanks! I made a 32x32

Joy (2012:09:25 22:02) I did it and it works great on all the browsers. I just cleaned my cached, history, cookies, then reloaded the page and it works great now. Thanks!!!

Ted (2012:06:07 17:55) I am using W7. I put the icon in to the LINKED directory and it showed immediately in Explorer (replacing the explorer icon) and in Firefox.

Luigi (2012:05:16 20:11) I did exactly what you said, and it does not show up anywhere.... Created all 16x16 files, placed them in the root folder etc... and nothing. In no browser whatsoever.... what am I missing....

Frank (2012:03:12 16:24) I did this and made it Here. It works in Firefox, but not Internet Explorer 9 - Any suggestions?

Add comment
Ping.fm Facebook del.icio.us MisterWong Bitacoras.com LinkedIn TwitThis Google Meneame Technorati Live Tumblr BarraPunto MySpace Digg BlogMemes Sphinn E-mail this story to a friend!

Recent articles: