BASICS

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

Today's HTML code 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! (Feb 2018: Although 32x32 icons are working on my website.) 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 the "HEAD" tags. (On either side of the 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>
</HEAD>
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 18 February 2018

up to top