Favicon is short for favorites icon. The name is derived from the bookmark list for Microsoft Internet Explorer, which is called Favorites list.
When you bookmark a site in your browser or add a site to your Favorites list in Internet Explorer (version 5 and above), it checks the server to see if there is a favicon.ico file present. If there is, the favicon.ico will display next to the bookmarked text.
Depending on the web browser, the favicon can appear in a variety of places, not just in the bookmarks list. It may be shown in the address bar or in the title of a browser tab, for instance.
For full instructions on creating and installing a favicon on your HostPapa site, please follow the detailed instructions below:
What is a Favicon
Favicon is short for “favourites icon.” The name is derived from the bookmark list for Microsoft Internet Explorer which is called Favourites list. When you add a site to your Favourites/Favorites list, Internet Explorer (version 5 and above) asks the server if it has a file called favicon.ico. If present, this file will be used to provide an icon that is displayed next to the bookmark text.
Other browsers such as Mozilla have also added support for favicons. Depending on the browser, the favicon can appear in a variety of places, not just in the bookmarks list (in fact, it may not even appear in the bookmark list at all). It may be shown in the address bar or the title of a browser tab, for instance.
How to create a favicon
To create a favicon.ico simply create a 16×16 .PNG file and convert it to an icon resource with png2ico. If you want, you can add more images to the same icon resource to provide alternative resolutions. Most browsers only use a 16×16 image, but in a different context (e.g. when you drag a URL from the address bar onto your desktop) a larger icon may be shown. If the icon resource only contains a 16×16 image, this will be scaled to the appropriate size, so technically there is never a need to add alternative resolutions. However, doing so can increase the quality of the displayed icon.
When you create the images to include in your favicon.ico, don’t forget that the icon may be composed against various background colors, so you should use transparency rather than a solid background if you want to avoid that your icon appears inside a box. Note, that icon resources only support binary transparency, i.e. a pixel may be visible or invisible but not something like 30% translucent.
Installing your Favicon
To add your new favicon.ico to a web page, put it on the server into the same directory as the web page it is for (e.g. www.example.com/foo/favicon.ico for www.example.com/foo/index.html). That is the first place a browser will search. If it doesn’t find an icon there, it checks the top-level directory of the server (www.example.com/favicon.ico for the www.example.com server), so by putting it there you can have a default favicon for all the pages in your domain. Depending on browser and configuration, the favicon.ico is not always rendered, even if it is in one of the above locations, unless the web page explicitly declares its presence. To declare that your web page has an icon, you add the following two lines into the <head> section of your page:
<link rel=”icon” href=”favicon.ico” type=”image/x-icon”>
<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”>
