If you look up at your browser’s address bar, you should see my smiling face beaming back at you. This is my favicon. A favicon (favorites icon) is a small image (icon) that is associated with a web site or web page.
The only standard established for favicons is that the file be named “favicon.ico” and that it be located in your root directory. Unfortunately, there is no web standard defining the favicon file format. What started out as a Microsoft icon file format using a 16×16 pixel and 16 color image has now blossomed into GIF and PNG images up to 200×200 pixels and using 24 and 32 bit color maps. Even animated GIFS are supported in some browsers. If you want a favicon that can be viewed in all browsers (except text-only browsers), you should stick to using the default 16×16 pixel icon format. But almost browsers will support 32×32 pixel size and 256 colors.
There are several free programs capable of handling the favicon file format. A very good general image conversion program is IrfanView which will take any standard image format, scale and convert it into an icon file format. This program will also maintain a transparent background if you desire it. Other paint programs can be found at Andy’s Freeware Guide but be careful choosing one as not all paint programs can handle the .ico file format.
Another method is to use an on-line converter. I am partial to the one provided by Dynamic Drive. This tool will allow you to specify a local image file and is capable of resizing it to a 16×16, 32×32, or 48×48 pixel icon file format.
After you have created your favicon.ico file, you need to upload it to your site’s root directory. Every browser will automatically look there first for the file. You also may choose to specify a different location for the file. If you do, you will need to add a link to the file in the page’s head section. In SiteSpinner, this is accomplished by inserting the following code into a custom header for the desired page:
<link rel="shortcut icon" href="URL-path-to-file/favicon.ico">
where URL-path-to-file/ is the URL path information to locate your favicon.ico file. If the file is placed in your root directory, the URL path can be omitted. It should be noted that if the favicon.ico file is present in your root directory and you also specify a link to another file, most browsers will use the linked file.
By using this link code, you can actually set a different favicon for every page in your project, but is not recommended. Since a favicon is used to help your visitor identify your site, using multiple icon images could become confusing.
But you should include the link code on every one of your pages specifying the main site’s favicon file. Remember that someone may find your site via a web search. If this search drops the visitor onto a page on your site, this link would make sure your favicon is associated with the page.
If you have already published your site and decide to use a favicon, you may be disappointed when the favicon does not appear in your browser. This is because the browser keeps a history of sites it has visited. If you have visited your site without having a favicon, your browser will assign a default image. This image will be used instead of your favicon every time you visit your site. To correct this issue, you will need to clear your browser’s history and/or temporary Internet files and re-visit your site. This should get your favicon to appear.
Contact the LowTechGeezer
VM User's Forum
Bruceee's Sandpit
Webmaster's Corner
Other Useful Sites
I need help……. i´m so frustrated……… i’ve tried everything and i can´t insert mi icon in the web page . where exactly is the root folder ? i got my file in a folder called web, and i put the file favicon.icon there………….. so, WHAT IS I´M DOING BAD?? why the way: edit page properties – page editor – header, I put the code show above and I CAN´T INSERT THE ICON in the web page…… how is possible that a so EASY stuff has become in a hell……. i´m thinking change the software …….
1. Replace text in red, for your web address.
2. place favicon.ico in media directory of your web page root.
3. Now paste above code into each of your web page headers. and upload website to server.
4. open browser and delete all cookies.
5. navigate to your website.
After 10′s of hours, reading dozens of peoples advise, and still failing to get it to work, this finally worked for me. Try it and good luck.
Andy.
Hmm last post missed out the code and the colours so I’m trying again, maybe you will have to forget the colour info.
If it fails again please feel free to email me from my website.
http://myweb.tiscali.co.uk/andymacs/
1. Replace text in red, for your web address.
2. place favicon.ico in media directory of your web page root.
3. Now paste above code into each of your web page headers. and upload website to server.
4. open browser and delete all cookies.
5. navigate to your website.
After 10′s of hours, reading dozens of peoples advise, and still failing to get it to work, this finally worked for me. Try it and good luck.
Andy.
I looked at your web page and did not see the <link> statement. While not normally needed with modern browsers, you may need to add it using a custom header or a code object placed in the header.
I also tried downloading your favicon.ico file and received a 404 not found error. Your favicon must have this name to automatically be used by modern browsers. If you plan to use a GIF or PNG file, then you must use the <link> tag method.
Hi.
I have tried all the suggestions on here and many others on google searches but cannot get my favicon to show it’s face.
I have tried inserting the HTML code in the page header in SiteSpinner and I have placed my favicon in the root of my web space with Filezilla, and cleared browse history and cookies in IE8 but still it won’t show.
Could it be something to do with my web host (Tiscali), or maybe something in the Tiscali web address that it doesn’t like?
http://myweb.tiscali.co.uk/andymacs
Cheers for your help.
Andy.
I have tried to add a favicon on many occasions without success. Today, following these instructions, it is done! Thank you.
Thanks.
I just added a favicon using Dynamic Drive. It took less than 5 minutes. http://www.wealthmanagementgroup.ca
Tim
I have a kinda-related question: I used to have my favicon staring back at me (as I said above) but I use Facebook- unrelated to this stuff- and all of a sudden the Facebook favicon is in the place of my favicon. How did that happen!? And, how can I get rid of the Facebook favicon?
Linda
Thanks, so much, for your help. I now have a happy little Favicon looking back at me!
Linda,
If you are using SS, click the Embed Foreign Object button (or for SS-Pro, the Embed File and Media Button), and in the Format drop-down list, select the Publish File item, then use the Filepath button to locate your favicon file. When you publish your project, this will upload the file to your site. Alternately, you can install a 3rd party FTP program which will give you more flexibility in maintaining the files on your site. Filezilla is a popular and free tool.
You insert code into the head section of your SS project by opening the Page Editor to the Header tab and entering the code into the Custom Header box. If you do not already have a custom header for that page, Click the New Header button to create one.
I don’t know what I’m doing but would love to learn. First: How do I upload my Favicon to my site’s root directory (PLEASE be nice and be specific)? Second: I’m supposed to insert code into the HEAD section of my pages. How, exactly do I do that? Hey, I’ve got to start somewhere
I just started using SS and have never done this before, so be kind. First off, what a great site for people like me. We have started a non-profit and I am creating a web site in SS. We would like to do 2 things. On add a calander of events and the others is a donation page. How would you suggest doing these?
Thanks in advance,
John