Mobile Launch Info

Why your website needs a FavIcon, and how to create one

Your website should have a graphic image named favicon.ico because of how modern web browsers are programmed to deal with such a file if it exists in the Home Directory of your website. I'll use the website PHonePHriendly.Com for an example, since I own the domain and control what goes into it's directories.

PHonePHriendly creates web sites meant to be read on mobile phone web browsers. The icon I use represents a 2G smartphone, specifically a Palm Treo. I drew it in Microsoft Paint and saved it as a monochrome BMP (bitmap format) file. I then Renamed the file favicon.ico and then used FTP (File Transfer Protocol) to move the file into the directory on my web server that contains the index.html file that is the Home Page of the web site.

When a modern web browser like Firefox, Opera, or Chrome reads the index file, it also looks for a favicon. If it finds it, it displays the image in the Tab with the text of the Title of the page. if you should Bookmark the page, the Title of the page is offered as the text of the Bookmark (so keep your <title> tag short), and also displays the icon image as part of the Bookmark.

Some websites are important enough that you want to reach them directly from the Home Screen of your smartphone without wasting time. For example, a fan of the Orlando City Soccer Club might want to visit O-City.Mobi and click on the words "Next Match' to take the user to the 'Named Tag' where the next game is located on the page. If the user then uses the browsers menu to choose "Save to Home Screen", the favicon image will then be used to designate the web site on your phone (and there's that short Title again under the icon).

The best description of installing a FavIcon on your web site is at Wikipedia.