Adding a Favicon to your site

Adding a Favicon to your site

Scott Manning
February 28, 2002 | Comments (28)

If you are using Internet Explorer 5 or higher, you'll notice that when you add my website to your favorites, my logo replaces the regular Internet Explorer icon in the Address bar.

It actually has a name: favicon. Most just know it as "the cute, little logo in the address bar". Adding this feature to your site is much easier than you think.

Browser compatibility Issues
Although it only works in Internet Explorer 5 and above, all other browsers will not experience any problems with performance. They will simply ignore the favicon. So even though not everyone can enjoy the favicon, its okay to use it.

Making the Icon
First you're going to need the picture you want to be your favicon. Scale it down to 16 x 16 pixels in size. Don't use a picture with a lot of detail because viewers will only be able to see so much at that size.

The easiest way to convert your image into an icon is to use Pinxy's Picture-to-Icon Converter. Not only will it convert practically any image type, its free.

Samples of other favicons
To get you inspired, here are some samples of other favicons from around the Internet:

Enjoy this article? There's more. Digital Survivors is a source of articles, tutorials, reviews, and commentary on all things digital.

Stay informed with , our feed is permanently ad-free.

These articles are new:

	Valkyrie
	1940 Aircraft Production Figures
	Let Teachers Carry Concealed Firearms at Schools
	50 Books on World War II Recommended by John Keegan

If you don't immediately see what you want, you can start a topic in our forums.

Comments (28):

1) Posted by: ben
July 25, 2002 6:09 PM

adding this snippet to your html is the 'proper' way to add a favorite icon:

also, you can use any type of image, not just .ico files. Your icon will show in many more browsers throught this method.

2) Posted by: ben
July 25, 2002 6:11 PM

whoops, lets try that again,

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

3) Posted by: michelle
September 4, 2002 4:39 AM

where do you put this code in your html page please?

4) Posted by: Mike
September 8, 2002 8:03 PM

Pinxy's Picture-to-Icon Converter
Installation
============
No installation is needed, just make sure you have Visual Basic 6.0
RunTime files installed in your computer.

yeah because everyone has those installed...

5) Posted by: till
November 13, 2002 5:31 PM

This will not work if caching is disabled...the browser will forget the favicon on restart

6) Posted by: Geoff Teabo
February 5, 2003 7:39 AM

You can't download this anymore from download.com.com.

Instead, download here:

http://www.pcworld.com/downloads/file_description/0,fid,22323,tk,hsx,00.asp

or if that doesn't work, then here:

http://makeashorterlink.com/?Y1C822953

7) Posted by: Scott
February 11, 2003 9:15 PM

Thanks, man. I've updated the link.

Scott

8) Posted by: chris
July 15, 2003 12:42 PM

Favicons??

9) Posted by: Matthias
May 23, 2004 6:48 AM

I can't put a favicon on my .tk acount. dot tk generates an other
code. Is there an other way to do it?

10) Posted by: p0ps
June 18, 2004 4:32 PM

How do you do this to a php site? you can't add the html to index.php .

11) Posted by: indiantrooper
July 2, 2004 10:57 PM

Does anyone know how to put favicons on .tk sies??

12) Posted by: mace
July 19, 2004 1:30 PM

I'm struggling with that question myself....
how to get favicons on .tk

13) Posted by: Jara
August 25, 2004 9:37 PM

In a .tk free domain you can't add an icon

14) Posted by: Arifin Isawiseman
September 21, 2004 6:41 AM

You can download Pinxy's Picture to Icon Converter from my site... and I will make a little bit modification for XP user so it can run well in your computer, not a promise... but I will try sometimes :)

http://www.geocities.com/baja/trails/5050

15) Posted by: AJ
October 23, 2004 7:25 AM

Excellent tool, thanks for the link!

16) Posted by: Barry de Graaff
November 7, 2004 10:03 AM

IT IS POSSIBLE TO ADD FAVICON TO DOT TK!!!!!

I just found that it is possible to add any icon to your dot tk website.

1.)
Go to the "my dot tk" control panel and select the domain where you want to add the icon.

2.)
Go to the "title bar" option and enter:
your title here

For my site this gives:
www.barrydegraaff.tk

There is a max length of 100 chars, so you might have to play around a little bit to get it working. But it works fine for me.

Greetings,

Barry de Graaff (www.barrydegraaff.tk)

17) Posted by: Barry de Graaff
November 7, 2004 10:08 AM

Oeps the forum took my html code out: read it here:

http://www.angelfire.com/cantina/bfdegraaff/content/doticon.txt

18) Posted by: Dee
November 15, 2004 9:15 AM

In regards with Barry de Graaff's suggestion in DOT tk favicon. I've recently tried doing that in the title bar. But it keeps on saying that I'm using illegal characters. I think they're not allowing using (/) in title bars.

I've tried removing other special characters... it's the (/) I've having problem with.

19) Posted by: Barry de Graaff
November 23, 2004 3:32 AM

Yeah,

It seems to work with paid domains only...
It seems I'm using a bug in the dot TK website,
than only persists for the paid domains.

Anyway... I shall try to do this for freedomains,
and comeback to this forum if im succesfully

20) Posted by: Barry de Graaff
November 23, 2004 4:10 AM

(Sorry for all the typing errors... blame AZERTY)

For now it seems that you cannot add a favicon to
freedomain.tk. The solution provided works
only for paiddomains.

http://www.angelfire.com/cantina/bfdegraaff/content/doticon.txt

Sorry to waste your time,

Barry de Graaff

21) Posted by: weight loss patch
December 21, 2004 12:24 AM

Does this diet patch weight loss thing work? I am not sure what to think??!!

22) Posted by: julio
March 3, 2005 2:01 PM

does it work without bookmarking!!, thanks., i mean when the page loads??

23) Posted by: t
July 25, 2005 11:28 PM

how do i add any type of icon to my site? i dont know how to.

24) Posted by: Annie
July 26, 2005 4:52 PM

Hi.
I recently added a favorite icon to my site...its all formatted correctly, in .ico format and added to the index page and everything. It was working PERFECTLY and then my sister came over and borrowed the computer and messed up the tool bars...she locked or unlocked something or who knows...but ever since then, my icons are not showing. I did recently also clear out my cookies....
but I have deleted the site from my favorites and then tried to add it again...but it will not show the icon...any suggestions what can be wrong?? Thanks a million
Annie

25) Posted by: Annie
July 26, 2005 5:02 PM

Please disregard last post...I used a different code that seems to be working for my site....
sorry to have inconvienced anyone! Its working now....LOL...

26) Posted by: matt
October 13, 2005 12:15 PM

ok so i have copyed it in to my page that i am just messing with on my own this is not a page on the inter net just on my own home comp and it is not working well some one tell me what i am doing wrong
ok here is a copy of mypage - all the ">"

html
head
title
Matt's web page
link rel="" href="icon.ico" type="image/x-icon"
/title

/head>

body bgcolor="#000000" link="#ff0000" text="#00ff00"
bla bla bla
/body
/html

i put my ico file in the same folder and titeld it icon but it is not working grrr some times i hate html

27) Posted by: John
May 28, 2006 3:18 PM

I believe the problem is that the name of the icon must be favicon.ico

You can't name it anything else and expect to work, but my html is rusty. Try it and see.

28) Posted by: AL
September 14, 2006 4:43 AM

Here is the solution: (add that between tags. See example at our site McCuff No Spill, Motorcycle Fill www.mccuff.com