BASICS

How To Do A Custom
'Favicon' On a Web Page

Internet Explorer 5.0 has a way cool little feature that allows webpage owners to custonize the icon for their site. This icon is set into the browser when someone adds it to their 'Favorite Places' folder.

Cati, in Brazil, had requested me to create this page to show how one sets the 'favicon' on their webpage. So I will use her site URL as an example in honor of her request!

Standard IE browser URL looks like this:
A custonized 'favicon' URL will look like this:

- or -
First the web designer must select which icon to use. I have been told that they have to be 16 color icons, but I have found that the 256 color icons work too! They DO have to be 16 x 16 Pixels in size! Next, choose where you are going to store them on your web site. I use a separate folder called 'ico' on my sites, but the icon can be anywhere you desire.

The code is simple and sweet!
All you do is add this line in between your <HEAD> AND <TITLE> tags:
<LINK REL="SHORTCUT ICON" href="http://www.yoursite.com/ico/youricon.ico">

So in your code, it will look like this:
<HTML>
<HEAD>
<LINK REL="SHORTCUT ICON" href="http://www.yoursite.com/ico/youricon.ico">
<TITLE>Your Page Title</TITLE>
You know what else? ..You can copy and paste this line right off this page and put it right into your code and then edit your own icon information!

BACK

~Mermaid_Elizabeth - 30 May 2000 - mermeliz@yahoo.com
edited 19 February 2006

up to top