Favicon Converter for Custom Website Favicons

What is a Favicon

A favicon is a small 16x16 pixels image that is shown on the browser's address bar and bookmark menu, associated with a particular web site or web page. Additionally they're often displayed next to the site's title in a user's list of open tabs making it easier to quickly identify amongst other sites. Although many modern web browsers support favicons saved as animated GIFs, JPEGs, PNGs or other popular image file formats all versions of Internet Explorer still require favicons to be saved as .ICO files (a Microsoft icon format). So the safest format of favicons is a .ico file.

The name "Favicon" (short for "Favourites Icon" or "Favorites Icon" for Americans) is derived from the bookmark list of Microsoft Internet Explorer which is called Favorites list. When you add a website or url to your Favorites list, Internet Explorer (version 5 and above) asks the server if it has a file called favicon.ico. If exists, this file will be used to provide an icon that is displayed next to the bookmark text.

For common web browser users, favicons are very helpful to quickly identify a site amongst other favorites sites; For web designers, it is a good way to brand their sites and increase the prominence in the visitor's bookmark menu.

How to Create Favicon

To create a favicon.ico, simply create a 16x16 graphic (in PNG format, for instance) in the image editor of your choice and convert it to an icon file with a favicon converter. The 16x16 size is the minimum requirement that most browsers used. Of course, if you want, you can add more images to the same icon resource to provide alternative resolutions. Most browsers only use a 16x16 image but in a different context (e.g. when you drag a URL from the address bar onto your desktop) a larger 32x32 pixels or 48x48 pixels icon may be shown. If the icon resource only contains a 16x16 image, it 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.

Keep in mind that for a user with a slow modem a favicon.ico may increase the page loading time by a few seconds if it is too large, so don't overdo it. Adding a 32x32 alternative should be enough to make sure the image will look good even in contexts with larger icons. Adding even more and larger alternatives is unnecessary bloat. You may try to keep the number of colors below 256 or even 16 if your image is simple enough. This will result in a smaller file that loads faster.

Another problem is 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. Icon images with a none-32bit color depth only support binary transparency, i.e. a pixel may be visible or invisible but not something like 40% translucent. Only the 32bit color depth (24bit true color plus 8bit alpha channel, introduced from Windows XP) supports the semitransparence effect.

Installing Your Favicon

After you've created a neat favicon, it's time to add it to your site. To do so, follow the below simple procedure:

1. Upload the generated icon file (must named "favicon.ico") to the root directory of your site. Most browsers will automatically detect and use the favicon.ico file, even on pages that are written in PHP, ASP, etc.

2. It has been suggested that both of the following HTML lines should be included in the HEAD section (between <head> and </head>) of your pages, at the very least, your site's main index page:

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

That's it! Note that your favicon may not appear immediately after you've completed the above two steps. In fact, it may take a few days, and in IE, sometimes the favicon will disappear from time to time due to a browser bug.

More About Favicons

Different favicons for each of your web pages:
To add a custom favicon for a non-homepage web page, upload it to the same directory of the web page (e.g. www.example.com/foo/favicon.ico for www.example.com/foo/page.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), so by putting it there you can have a default favicon for all the pages in your site. 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="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />

Other image formats than ICO:
A favicon can usually be in any image format supported by web browsers, the major exception being Internet Explorer, which only supports ICO. The .ico file format will be read correctly by all browsers that can display favicons.

Histroy of Favicon:
Originally, Internet Explorer only used favicons for bookmarks, which created a minor privacy concern in that a site owner could tell how many people had bookmarked their site by checking the access logs to see how many people downloaded the favicon.ico file. However, since newer versions of Internet Explorer and most other browsers also display the favicon in the address bar on every visit, that concern may no longer be relevant.

Issues of Favicon:
Most modern browsers implement both methods to request favicons. Because of this, web servers receive many requests for the file "favicon.ico" even if it doesn't exist. This may annoy web server administrators by creating many server log entries, and unnecessarily loading the disk, CPU, and network. Another common problem is that the favicons may disappear if the browser's cache is emptied.

100% Satisfaction Guaranteed

We keep customers amazingly happy!

  • 30-Day Money Back Guarantee
  • LIFETIME Free Updates and Free Tech Support
  • 100% Clean, No Spyware. No Virus.
  • Safe & Secure Purchase

IconLibraryX | About Us | Affiliates | Terms & Conditions | Privacy Policy | Contact Us | Resources | Sitemap