Click here to Skip to main content
Click here to Skip to main content

Customising your website's Icon in IE5

By , 27 Nov 2000
 

Introduction

It's always nice to differentiate your site from others, and there a couple of places in particular that allow you to make your site stand out from the crowd.

Dragging a URL from the address bar of Internet Explorer onto your desktop creates a shortcut with the familiar blue and white IE shortcut icon:

Adding a site to your favorites brings a similar result.

If your readers are viewing your site through Internet Explorer 5.0 or above then you can make your site stand out for them by simply creating a 16 x 16 pixel bitmap called favicon.ico (using the Visual Studio icon editor, for example) and placing this icon in your web site's root directory.

As soon as the user adds the site to their favorites then IE will scan that website for the favicon.ico and use it instead of the standard IE icon for desktop shortcuts, the address bar, the 'Favorites' drop down menu in IE, the shortcut bar in the taskbar (Win 98+ and Windows 2000), and in the Office Shortcut bar.

You can associate a different icon with a specific page by adding a LINK statement to the HEAD of your page:

<HEAD>
  <LINK REL="SHORTCUT ICON" HREF="http://www.mydomain.com/myicon.ico">
  <TITLE>My Title</TITLE>
</HEAD>

Click here to see the icon for Code Project.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Chris Maunder
Founder CodeProject
Canada Canada
Member
Chris is the Co-founder, Administrator, Architect, Chief Editor and Shameless Hack who wrote and runs The Code Project. He's been programming since 1988 while pretending to be, in various guises, an astrophysicist, mathematician, physicist, hydrologist, geomorphologist, defence intelligence researcher and then, when all that got a bit rough on the nerves, a web developer. He is a Microsoft Visual C++ MVP both globally and for Canada locally.
 
His programming experience includes C/C++, C#, SQL, MFC, ASP, ASP.NET, and far, far too much FORTRAN. He has worked on PocketPCs, AIX mainframes, Sun workstations, and a CRAY YMP C90 behemoth but finds notebooks take up less desk space.
 
He dodges, he weaves, and he never gets enough sleep. He is kind to small animals.
 
Chris was born and bred in Australia but splits his time between Toronto and Melbourne, depending on the weather. For relaxation he is into road cycling, snowboarding, rock climbing, and storm chasing.

Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
You must Sign In to use this message board.
Search this forum  
    Spacing  Noise  Layout  Per page   
GeneralUseful for beginnersmemberthatraja15 Jan '10 - 23:26 
5 from me Blush | :O
GeneralFavicon.ico not working for asp.net page?!memberjgilbert5 May '05 - 9:28 
I keep trying to figure out how to do this for an asp.net page with code behind on other page...i put the favicon code in on the default.master page hoping it would show up on the default.aspx page...but no dice...is there something screwey going on here or am I just wasting my time with this here? lol
 
J Gilbert
GeneralRe: Favicon.ico not working for asp.net page?!memberMaxim Langman1 Jul '07 - 3:58 
First of all asp.net doesn't like capital letters.
Secondly, there is no such an option rel="shortcut icon".
In any case, it really doesn't work Confused | :confused: Sigh | :sigh:
GeneralRe: Favicon.ico not working for asp.net page?!membertbetz18 Oct '07 - 5:43 
I have been having the same issue with ASP.NET. I use master page templates and had a rough time getting it to work, until I found a blip on MSDN about how to do it. The code was almost identical to what I had seen here, but it still didn't work until...
 
I changed the order of the tags in the <head> area. I made it the first tag, then it magically started to work! Big Grin | :-D This is the code I used...
 
<link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon" />
 
I have tried a type of image/x-icon and image/ico, and they both worked for me. The key was to have it as the first tag in the <head> area.
GeneralOther browsersmemberyorgato3 May '05 - 14:46 
I might add it also works on other browsers such as Netscape for instance
GeneralAuto RefreshsussAnonymous19 Mar '05 - 10:59 
Hi i need a javascript that checks if the user has been on the website before and if the user has been on the website before automaticly refresh the page 1 once
and if they havn't been there nothing happens Confused | :confused:
General.ICOsuss[FHD]Grey_fox18 Sep '04 - 0:44 
would i need some kind of program to save a .ico file? Or what should i do to get one. I have MS Paint, Photoshop7 and erm anything else that is free with windows XP home edition
 
my site is found here: http://foxhound-delta.com
GeneralHELP ME!!!sussAnonymous8 Apr '04 - 18:15 
what do you put in for "SHORTCUT ICON"??? and does it work for a site like angelfire or geocities?
Generalsimple but usefulsussAnonymous15 Dec '03 - 0:13 
Only after having saw this article, I know this is a very easy thing but a boring one if you don't know how to do it!
GeneralWrapper for Refresh ButtonmemberAnonymous6 Jun '02 - 13:39 
Hi There,
 
I want refresh button not work in browser. Can any one please advise me how to do this.
 
Any help is appreciated.
 
Thanks.
GeneralRe: Wrapper for Refresh ButtonsussAnonymous9 Mar '03 - 4:05 
Try this this will definitely work.
 
<HTML>
<HEAD>
<TITLE>that</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function fun() {
 
if (document.all)
{
var top=self.screenTop;
if (top>9000)
{
alert('window was not refreshed')
}
}
else
{
var top=window.outerWidth;
if (top==0)
{
opener.alert('window was not refreshed')
}
}
}
 
//-->
</SCRIPT>
 
</HEAD>
<BODY BGCOLOR="#FFFFFF" önunload="fun();">
Click to leave page.
</BODY>
</HTML>
 

GeneralRe: Wrapper for Refresh Buttonsussmonicb20034 Jul '05 - 0:14 
works in IE but what's happend with Mozilla, Netscape?
Generalhelp!memberAnonymous14 Feb '02 - 17:20 
I can't do it!!!!! its not working!!! I got the icon got the link checked the size of the icon -NOTHING!
GeneralRe: help!memberThomas Freudenberg17 Feb '02 - 23:46 
Maybe these threads in the lounge can help you:
 
Regards
Thomas
 
Finally with Sonork id: 100.10453 Thömmi
 

Disclaimer:
Because of heavy processing requirements, we are currently using some of your unused brain capacity for backup processing. Please ignore any hallucinations, voices or unusual dreams you may experience. Please avoid concentration-intensive tasks until further notice. Thank you.

GeneralCool!!!memberNish [BusterBoy]11 Jan '02 - 21:01 
Chris
 
I've always wondered how they do that.
I thought it's an IE thing where IE automatically tries to download an icon with a standard name.
Didnt think it was a simple tag Smile | :)
 
Cool!
Thanks too
 
Nish
 
p.s. I got to this article cause it came in the "Feature Article" link Smile | :)
 
Sonork ID 100.9786 voidmain
www.busterboy.org
If you don't find me on CP, I'll be at Bob's HungOut
GeneralBlehmemberShaitu7 Oct '01 - 7:40 
Aar, me tried that simple code of yours and it didn't work. Probably it's just that I don't have a registered site of my own, just crapy angelfire-pages.. But if that's the prob, maybe you should create a new code ..or .. sumthin..
GeneralIts differentmemberRaghu Ram25 Jun '01 - 22:20 
This arcticle has good perspective for changing icon being onlineRose | [Rose] Rose | [Rose]
 
Raghu Ram
Generalthis websitememberAnonymous15 May '01 - 4:02 
Suspicious | :suss: Suspicious | :suss:
GeneralGreat tip!memberAnonymous21 Apr '01 - 12:34 
thanksSmile | :)
General32x32 for shortcuts(large icons view)memberSteve Dunn4 Dec '00 - 23:39 
Explorer will show a 32x32 icon for shortcuts when dragged onto a listview set to 'large icons', such as the desktop, or Explorer. Just select image/new device image from withing VC++ a create a 32x32 icon.
Great tip Chris!

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Permalink | Advertise | Privacy | Mobile
Web03 | 2.6.130523.1 | Last Updated 28 Nov 2000
Article Copyright 2000 by Chris Maunder
Everything else Copyright © CodeProject, 1999-2013
Terms of Use
Layout: fixed | fluid