What is a favicon?

What is a favicon?

Notice the red “Y!” symbol that appears in the left-most area of the address bar in Internet Explorer graphic below. Look familiar? Yep, that’s Yahoo’s favicon. These favicons (favorites icons), sometimes called “bookmark icons,” appear after adding a website with a favicon to the favorites menu in Internet Explorer and certain other browsers.

Favicons also appear in the favorites menu after a page is added. Most anyone who’s roamed the Internet and bookmarked sites of interest has noticed favicons showing up in the favorites menu like this:

They also often appear in the Windows Start menu after installing a program as shown here:

Creating a favicon

A favicon should be 16 X 16 pixels with 16 colors and the file name should be favicon.ico. IconEdit32 is a good freeware program that allows you to create favicons as well as icons of other sizes and color depths. IrfanView is an excellent freeware image viewer that supports the icon (.ico) image format. You can use it to shrink one of your regular images to a 16 X 16 size, then decrease the colors to 16 and save as a “.ico” file. I like to use IrfanView to get an image down to specifications, then edit it with IconEdit32. Remember, if you don’t save it as “favicon.ico,” it won’t work. Also, don’t just shrink an image to icon size and rename it with a “.ico” file extension. That won’t work either because it’s not a real icon file.

Installing a favicon on your website

Simply upload the file, favicon.ico to the root web directory of your hosted website with your favorite FTP program, Microsoft FrontPage, Dreamweaver MX or whatever. Make sure your favicon file is named “favicon.ico.” When someone bookmarks your site with a browser that supports favicons, your favicon will appear. Alternatively, you can use this code between the <\head><\/head>(x)HTML tags:

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

NOTE: PLEASE REMOVE FORWARD SLASHES (\) FROM HTML TAGS. IF YOU DON'T REMOVE THEM THE CODE WILL NOT WORK.

WISH YOU ALL THE BEST.