Favicon Quick Guide

January 29th, 2008 by HTML-Kit Support      Tags: Favicon from Pics       Views: 73031
Support Home     Next: Tools update 20080202.....     Previous: Portable Kit
VN:F [1.7.3_972]
Rating: 4.3/5 (12 votes cast)
 
 
Play Video:
YouTube Video
 

Introduction

FavIcon is short for favorites icon. Favicons became popular as icons that were displayed next to web site addresses on the favorites menu of a browser, also called the bookmarks menu. Today, favicons are displayed on the browser address bar and browser tabs, as well as on bookmarks and Internet shortcuts. A favicon is an icon associated with a web page or an HTML document.

Although it’s not necessary to add a favicon to a web page or a web site, associating an icon with a web site address can make it easier for visitors to remember the site. In case of business and promotional sites, favicons can be used to improve the visibility of business and site logos.

Creating a favicon

Since a favicon is a Windows Icon file, any application capable of saving bitmaps in ICO format (*.ico) can be used to create a favicon.

However, not all image editors support ICO files or may require an add-on to save in ICO format. Although some browsers also support GIF and PNG images as favicons, only favicons created in ICO format provide compatability with the widest number of web browsers.

Let’s get started by creating a favicon. The method number 1 below is usually the quickest way to create a favicon. The manual method is described in method number 2 and requires additional software.
Method 1: Automatically generate a favicon

FavIcon from Pics, a free service provided by the HTML-Kit site, can be used to generate a ready-to-use favicon.

  • Select a picture, a logo or other graphic for the source image.
  • Click Generate to view the favicon.
  • Download the generated file. It includes favicon.ico and a short help file.

Method 2: Manually create a favicon

If you prefer to create a favicon manully and if your image editor supports saving in ICO format, create a bitmap that’s 16 by 16 pixels in size and save it as favicon.ico in ICO format. For the best results, make sure that the favicon.ico file meets the following specifications:

  • Width and height: 16 pixels by 16 pixels
  • Colors: 256 or less colors
  • File format: ICO (*.ico)
  • Save as file name: favicon.ico

Installing the favicon

Once you have created a favicon, it can be assigned to one or more web pages.

To keep things simple, and also to keep backward compatability with older browsers, let’s use favicon.ico for the name of your favicon file.

There are several ways to add a favicon to a web site, depending on how the site is hosted and how it’s updated. Before using one of the following methods, first upload your favicon.ico file to your web site. It should be in the root or the main folder of the site.
Method 1: Add favicon tag to the HEAD section

If you have access to HTML files on your web site, this is the recommended way to add a favicon to your web pages.

Open the index page or the main page of the site in your web page editor. If you don’t use a web page editor, you can use any text editor such as Notepad. The index page is usually named index.html or default.html. The rest of this document assumes that it’s named index.html.

Once index.html is opened in the editor, find the text <head> (called the <head> start tag) located near the top of the page. Several lines below it, there should be a similar tag but with a slash — </head> (called the </head> end tag). Paste the following line (called the favicon link tag) below <head> but before </head>.

<link rel="shortcut icon" href="favicon.ico">

If you’ve used FavIcon from Pics to generate a favicon, please see ReadMe.txt included in the download for the favicon link tag recommended for your favicon. Use what’s in ReadMe.txt instead of the tag listed above.

Finally, save index.html and upload it back to your site.
Method 2: Upload favicon.ico to web site’s root

If you don’t have access to HTML files on your web site or if you prefer not to edit them, you can simply upload favicon.ico to the root/main folder of your site as mentioned earlier. This method does not give the best results and should be used only if the method number 1 cannot be used.
Method 3: Check web hosting documentation

If you don’t have access to HTML files on your web site and unable to upload favicon.ico to the root/main folder of the site, you may have to rely on other methods provided by the web host. If your hosting account comes with a control panel, see if there’s an option for assigning a favicon. Also check web hosting documentation for additional information. If there are no options for uploading favicons, you may have to contact web hosting support for help.
Finally, reload your web site in the browser to view the installed favicon.

Answers to common questions

So you’ve created and installed a favicon. This document provides troubleshooting tips if your favicon doesn’t show up in the browser.


Testing the favicon

If your favicon doesn’t show up on the first try, don’t worry. The following free service, also provided by the HTML-Kit site, can be used to quickly run common favicon tests. It works regardless of how the favicon was created and installed. You can also perform these tests manually as will be described later in this document.

FavIcon Validator

If no errors are found and the favicon still does not appear in the browser, try the following troubleshooting tips.
Favicon validates but no show in the browser

If the favicon does not appear in the browser, try clearing the browser cache. Close and restart the browser, and then reopen the web site. This step is only necessary on the computer used to install and test the favicon. Web site visitors will generally see newly installed favicons without having to take any additional steps.

When testing favicons in Internet Explorer 5.x and 6.x, add the site to Favorites using the "Favorites" menu, and restart Internet Explorer.
Still have unanswered questions?

Please post your questions on the HTML-Kit Support Forum. Don’t forget to include your web site address if you’d like someone to preview and test your favicon.

Final thoughts

Have a question about installing or getting your favicon to work?

Please post your questions on the HTML-Kit Support Forum

HTML-Kit support forums have received a good number of questions about installing and testing favicons. If you had posted a question about favicons in the last several months, the chances are it was answered by Dave Pyles. A big thank-you goes out to Dave and everyone who has helped out by testing websites and answering questions.

See Also:

Was this article helpful?
5 rating, 25 votes5 rating, 25 votes (+5 rating, 25 votes, rated)
Loading ... Loading ...
Share this on:
  • Twitter
  • Digg
  • StumbleUpon
  • Facebook
  • MySpace
  • del.icio.us
  • Sphinn
  • LinkedIn
  • Google Bookmarks
  • Live
  • Yahoo! Buzz
  • email
  • Print
 

4 Responses to “Favicon Quick Guide”

  1. LauraS says:

    I love this little application! Thank you for making it available and so easy!

  2. Peaches says:

    This is great! Thanks for the help. I tried everything, then I read the suggestion to clear the cache!

  3. Kelly says:

    encourage@demurred.kirby” rel=”nofollow”>.…

    tnx for info!!…

  4. arturo says:

    horsemanship@lifelong.companys” rel=”nofollow”>.…

    good info….

Do you have a question that requires a reply? Please post it here for a timely and friendly reply.
 
If you have a comment, you can post it below. Not all comments are read, so be sure to use the support forum instead if you need an answer.
 
Leave a Comment or use the support forum if you have a question.

 

© 2009 HTML-Kit.com. All Rights Reserved.  |  Privacy Statement   
HTML design aid