You are using a browser which is not compatible with CSS (for more information, see Tara's tutorial). Because of this, it is possible that our website may not appear correctly in your browser. We apologise for the inconvenience, and recommend you upgrade your browser to one which is compatible with CSS. For more information, please visit our Browser Upgrade page.

4WebHelp

Five Questions about Favicons by Peter

Last updated: 02/05/2012

1. What is a Favicon?
2. How can I make one?
3. How do I use it?
4. What are the security/privacy concerns related to favicon.ico files?
5. Where are my favicons?

What is a Favicon?
The favicon (pronounced fav-eye-con, shortened form of 'Favorites Icon') is specific to Internet Explorer 5, and the Konqueror web browser. It is used to customise the icon next to your bookmarked web site to be your own customised logo. This is useful because it will remind a visitor about your site, as your link in the favourites will stand out. The favicon is a normal Windows icon file (.ico). It generally measures 16x16 pixels and consists of 16 colours.

A picture of my Favicons

Top

How can I make one?
There exists an online favicon generator (requires Java support). This is fine if you only want to make a couple of icons. However my preferred method is to use an icon editor. There are a large number of shareware programs to choose from. I have used Microangelo 98 (on PC Pro coverdisc) and Axicons. Microangelo 98 is a better program, but it is more invasive in your Windows setup and therefore I am using Axicons. Another program that has been highly recommenced is Icon Forge, and I plan to try it shortly.

Using these programs allows you to create an icon file containing two icons if you wish, one using 16 colours and the other using 256. Using 256 colours allows a better icon to be displayed if the monitor supports it. Browser recognition is not required for this to work.
Top

How do I use one?
Once you have created it you need to upload it to your root directory. Microsoft reccommend that if you have pages outside your root directory then you add a <link rel="SHORTCUT ICON" href="favicon.ico"> in the head of your page. This is not advisable, as I believe it does not comply with the standards laid down by the W3C.
Top

What are the security/privacy concerns related to favicon.ico files?
When you bookmark a page, the browser requests the favicon.ico file. The web surfer is unaware that a request has been made and users can not turn this feature off. The web site can then use their logs to build a record of the user's bookmarked pages. Visitors could then be tracked by a cookie. This would allow sites to build more profiles of visitors interests. I'm not sure how you could do this, so if anyone can fill me in on the details please contact me. Most people do not think the privacy concerns that result from this bookmarking/favicons scheme are anything to worry about. (No one has created a real uproar regarding the privacy issues related to favicon branded bookmarks).
Top

I used to see favicons, but now they've all disappeared. What happened?
Favicons are cached very similar to HTML documents. When they are deleted from the cache, they revert to the standard IE icon. If you want to prevent the icon from disappearing:

1. Create a local directory (i.e. c:\favicons)
2. Copy the desired favicon into the directory created above.
3. Right click the mouse over the favorite/bookmark and select properties.
4. Enter the path (or use the "Browse" feature) to the favicon you want for that bookmark.
Top

© 4WebHelp and Peter

Latest comments on this tutorial
Name: lucky82Email lucky82 at mail dot com
I went to multiple sites to create favicons, and this seems to me the best http://onlinefavicon.com/ , you can create favicon with drawing tool or generate from jpg file to 16×16 or 32×32 ico file, also you have gallery of favicons from other users, it was easy for use, you have explanation how to set up favicon to your site, try it…
Name: carmenEmail carmen_furtado at yahoo dot com
i have a favicon on my desktop that was put there when i saved the webpage but it changed to the world icon but now the original icon is back - where do i find the website's icon on my hard drive - when i type favicon.ico on the website i don't get anything - thank you
Name: sandsmithEmail peter at sandsmith dot com
I can get a favicon to appear in Chrome but not in IE8 - why?  also the icon in the URL space is now a small world, not my favicon, and is that for all sites.    Any explanation of  how to get the favicon to appear in the URL bar as well as i n th e tab and favorites?
Name: SiethEmail none
For PHP you'll find it'll work better if you use:

<html>
<head>
<title>WEBSITE NAME</title>
<LINK REL="SHORTCUT ICON" HREF="favicon.ico">
<head>
<html>

Just load your favicon.ico file into the same directory as your main.php (or similar loading file).

**IMPORTANT: Put  the above code right at the BOTTOM of your PHP code. For some PHP sites putting HTML coding at the top will stuff up font sizes etc. not sure why just does.**
Name: deanEmail none
Lately for fun I've been saving favicons that I like, mostly by utilising the 'Google Favicon' extension and then right-clicking and using the 'View Image' command.

Every now and then I come across a site that won't allow me to view their icon, instead producing a pop-up that asks me if I want to download the image instead.

Why does this happen, and how can I simply get a link to just view the favicon instead?
Name: grayEmail methley at uku dot co dot uk
I have a free webpage with a working favicon.

I have a new domain name hosted for me.

That domain name is masked by the host company I bought it from so it shows my pages under the new address domain address, they say I have no access to any page or file on their server that masks the domain name, so I can't add a favicon that way.

I do have a favicon on the free site that shows under the new domain name, if the domain name mask program can show my pages in a browser, why can't it show the favicon also in the html in the browser address bar.

Is it easy or is it impossible.
Name: DaveEmail rich772 at gmail dot com
Thanks for your help.  This is what worked for me:
1- favicon.ico must be 16x16 (not larger)
This site lets you pick the size: http://www.favicon.co.uk/
2- link code to favicon directly under the <head> tag
<link rel="shortcut icon" href="/favicon.ico" >
3- upload the favicon.ico and revised html to your root directory.
Name: HarveyEmail hschoenman at verizon dot net
If you are having difficulty getting your favicon to display even though everything looks right (this is what happened to me), make sure that you generated a 16x16 icon (the default for the Favicon Generator is 32x32) and [*important*] delete your browsing history and refresh the page with your website. You will then see your favicon everywhere there would normally be a default browser icon.
Name: DanielEmail use contact form
Asif: I suggest you try the <link rel... method. If that doesn't work then I'm afraid I don't think it's possible.
Name: ASIFEmail none
hOW CAN I CREATE FAVICON ITEM FOR MY WEB PAGE, WHICH RESIDES IN MY LOCAL HARD DRIVE not in the actual domain. I am doing this for a CDROM html files which can contain my profile. Can anyone help me?
Name: mrpigfeedEmail none
actually, you're wrong there.

it is completely advisable and standards compliant, as well as being compatible with all major browsers today (IE, FF, Opera, Safari, etc.)
Name: How to Add Favicon So It Show Up in Firefox TabsEmail none
Ok, thanks to these posts I have found the answer. All you have to do is add the following code to the WEB PAGES themselves for the favicon to appear in tabs such as those found in Firefox. The favicon icon in that is placed the root directory functions only for the images that appears to the right of the URL in the browser. Without this code present in your pages, the favicon will not show up in the tab as a shortcut icons:

<HEAD>
  <LINK REL="SHORTCUT ICON" HREF="http://www.bizecom.com/favicon.ico">
  <TITLE>My Title</TITLE>
</HEAD>
Name: nicolasEmail adluo dot sales at gmail dot com
I just found one free favicon generator.
http://www.webscriptlab.com, Free and easy to use online tool that can create a favorites icon (favicon.ico) images for browser address bars, favorites and tabs, from pictures, logos and other graphics.
Name: DougEmail office at favicon dot co dot uk
Theres never been a better time to have a favicon.  With the new release of IE7 it automatically displays the favicon in the tabbed browser window without the user having to bookmark the page.  Adding the code to the page is still advisable so it shows up in bookmarks.

To easily create your own favicon for free hop on over to http://www.favicon.co.uk

Name: Ray TEmail rjt at maximise-ict dot co dot uk
Thanks for your help my favicon works! - with your approval I'll provide a link to yours from my website!

However, I have a problem caused, I think, by using a Frames setup.  When I create a shortcut to desktop it establishes a link to the page and not to the whole site!  Is there any way of forcing the shortcut to the home- or index.htm file?
Name: KarenEmail none
Hi Peter,

Where can I host my favicon? Photobucket doesn't support it and I created a myfilehut account and I am having problems uploading the file (the site doesn't seem to work).

I've been struggling with this for over 4 hours and all I want to do is host my favicon at a free site and then copy that url into my forum admin panel.

I hope you are able to help me Smile

Cheers,

Karen
Name: DanielEmail use contact form
peasly: Actually all you need to do is this Smile:

Quote:
Once you have created it you need to upload it to your root directory.
Name: peaslyEmail none
Quote:
This is not advisable, as I believe it does not comply with the standards laid down by the W3C

So what do you suggest..?

Very Happy
Name: MikomiEmail moderngraphics at gmail dot com
Well i've looked at this, and I tryed it, it doesn't work for me. Tis also doesn't seem the right way to add an icon to the site, i've checked source codes of many sites with icons and i can't find these code at all. can anyone tell me how i can get this done ?
thnx
Name: rjEmail none
FAVICON BATTLE

bring your favicon to the party

http://johanrooms.com/favicons.php
Name: GEmail none
How about a tutorial on getting links to work on this comments page?

[url]www.property-in-the-sun.com[/url]


Name: Geoff ForsterEmail none
Thanks for the tutorial very useful.

Check out our favicon at http://www.property-in-the-sun.com
Name: JerryEmail makco_online at yahoo dot com
sorry for the multiple posts i forgot to include my e-mail address in case someone has an answer for me

Name: JerryEmail none
sorry this link to my website should work www.goszimers-box.com
Name: JerryEmail none
i am also having a problem getting my favicon to work.  it shows up in my organize favorites window but thats it not in the actual favorites list and not on the tab control.  Many other websites icons show up where i would like mine to such as google yahoo and my bank that i use as well as the awt or something forum.  has there been an up dated method to insert the favicon on the webpage?

if someone could look at the source code of my webpage i would appreciate it

<a href="http://www.goszimers-box.com">www.goszimers-box.com</a>
Name: Ravish KumarEmail netpowersoft at yahoo dot com
This is good to read about the favicon (favorite Icon). Nothing was known to me before raeding this tutorail.

Ravish Kumar
Name: WebDevEmail none
I have tried the favicon thing for the following site:
http://www.audioenglish.net/
And guess what - it works like a charm!
Name: tpgamesEmail none
Guess what! I finally found the html pages, in the HELP folder. Go figure!!! LOL

However, when I put the code in, it still did not work. I might be putting it in the wrong html file. However, I am going to go over to the hosting forum and see what help I can get there. Thanks again!
Name: tpgamesEmail none
Try adding the favicon to a php forum that does NOT have a findable html page!!!!!!!

When I edit the index.php file, I get errors. If I ONLY return ONE line at the beginning of the document without adding any code, and return BEFORE any code begins, I get the stupid errors!

I would love to have someone  indicate how to get a favicon on a SMF forum that you simply did the automatic download, and it set it self up itself. I can't even find the html page that the view source code says I have and I own the site, have done hard coding on many of the tpgames pages, just NONE of the php nor for the forum.

Thanks!!!!
Name: LukeEmail luke dot lloyd at bluebottle dot com
FAO: Webbie Holland

For php pages all you have to do is use the following structure:

<html>
<head>
<title>PAGE TITLE HERE!!</title>
<LINK REL="SHORTCUT ICON" HREF="[PATH]">

Then your php coding follows after
Name: DaveEmail crawforddavid2002 at yahoo dot com
Sorry if i missed something but what is the code for the favicon? The code where it says how do i use one shows it after the first page what do i do on the first page
Name: SteveEmail none
Make sure you put the link tag directly under the <head> tag so it complies with W3C.

<HEAD>
   <LINK REL="SHORTCUT ICON" HREF="http://www.bizecom.com/favicon.ico">
   <TITLE>My Title</TITLE>
</HEAD>
Name: AngelaEmail angela at 6flproject dot com
I have successfully created, uploaded, and added a favicon to my site, however, my question is -- how do you get it to appear on a firefox browser tab?
Name: KjKEmail kkukla at syr dot edu
I created a favicon and use firefox.  When I click on my web page it doesn't show up, but then it shows up when I click on it a second time.  Then, when I click on it a third time it disappears from the URL and is only visible in the Mozilla tab.  Does anyone know how to resolve this problem?  
Many thanks!
Name: FrankEmail none
If your website has a favicon, you can add it to peerbot.com a favicon search engine.
Name: hansEmail hans at kriyayoga dot com
favicon on php pages easy !

somewhere most likely you use a template for the pages where you hopefully define your meta tags etcfor a clean optimized SEO and that's where you enter your favicon link as described above.

just see my own example at
http://www.kriyayoga.com/love_blog/index.php

if you use several templates for different pages - then just add your favicon link to each of your templates

good luck

hans
Name: gPEmail none
Look this : http://favicons.basecomac.net

Wink
Name: JasonTEmail none
Peter, thanks for the info. In what way does using the
link rel=shortcut icon
tag not comply with the standards laid down by the W3C?
Name: HemebondEmail none
Put the icon in http://www3.sympatico.ca/thinc/SoccerPool/ and it will work.

Alternatively, put the icon wherever you want and use an absolute path in the href attribute.
Name: DanielEmail use contact form
Trevor: The Netscape icon is appearing because Sympatico has a favicon up at http://www3.sympatico.ca/favicon.ico, which takes priority over favicons in the root of your site. As it says in the tutorial, you have to uploaded to the root of the domain - if you can't then I'm afraid there's not much you can do (the tag mentioned probably only works in IE).
Name: Trevor WilliamsEmail thinc at sympatico dot ca
Great info.
1 prob. on one site (A sub-directory of the Root) I am getting a Netscape ICO while using IE?
See Might there be some other element embedded in the HTML of the page that forces Netscape?
Name: DanielEmail use contact form
BERTRAND TARQUIN SMYTHE: Not unless it's in a string surrounded by double quotes ("):

echo ("<link rel=\"SHORTCUT ICON\" href=\"favicon.ico\">");
Name: BERTRAND TARQUIN SMYTHEEmail none
<link rel="SHORTCUT ICON" href="favicon.ico">

escape the  quotation marks with \
eg

<link rel=\"SHORTCUT ICON\" href=\"favicon.ico\">
Name: Webbie HollandEmail none
Hello, I'm trying to make a favicon but it doesnt work because i work on a phppage. Anyone an idea how to get it working?
Thnx
Name: RadoEmail none
I am really happy to be able to use your tutorials here, I have managed to add favicons to my hobby site http://www.kangarado.com.au as well. Thankx
Name: RadoEmail none
I made one for me but just a very quick one. You can see it as you say only when you add the site into the 'Favorites'. Hehe, it's great and so quick.  I just used a quickly made 'gif' image and shrinked it to the mentioned size 16x16px.
WebDesignStudent: http://woodoven.tripod.com
/will remove those flash movies from my site, sorry, teacher needs them./
Name: Jimbo - EnglandEmail none
Many thanks for your time and effort in making this clear. Very easy for a olden to understand.

Jim

Add a new comment

This page is © Copyright 2002-2017, 4WebHelp. It may not be reproduced without 4WebHelp's prior permission.