Favicons: Custom Web Site Icons

A number of web sites have their own custom icons that appear in the address bar (that's the text field in which you enter the URL or "web address" of the site you want to visit). All sorts of web sites -- from the major ones like CNN, Amazon, eBay and Google to personal home pages -- make use of these custom icons.

Pictured below is what a site with its own icon (my blog) looks like in the Firefox browser on Mac OS X (it should look similar on Windows or in Internet Explorer). Note that the icon appears in both the address bar and in the tab in which my blog is being displayed:



Compare this with how a site without its own icon looks. Both the address bar and in the tab in which the site appears simply display a generic icon:



In Windows, a site's custom icon also appears in the Bookmarks or Favorites list beside the site's name if it is bookamrked. If the site doesn't have a custom icon, a generic icon is used instead:



These custom icons are often called favicons -- short for favorites icon. and named for the fact that it is displayed in the Favorites (or bookmarks) list of your browser. This article will look at creating creating and installing custom icon for your blog.

Creating a Favicon

Favicons are tiny, being a mere 16 pixels high and 16 pixels wide. Favicons were originally implemented by Microsoft for Internet Explorer and hence were Microsoft Windows icon (.ico) files. Nowadays, all modern browsers support favicons, which can now be in .ico, .gif or .png format. For the purposes of this article, we'll make a favicon the easy way: we'll take a graphic and convert it into a .ico file.

The simplest way to convert a graphic into a favicon is to use the FavIcon from Pics site. It lets you choose a picture file from your hard drive and creates a favicon based on it.

It's easy to use: once you have a graphic (in .gif, .jpg or .png format) that you want to turn into a favicon on your hard drive, go to the FavIcon from Pics site. Click the Browse... button to select the graphic, then click the Generate FavIcon.ico button to create the favicon:



The site will create the favicon based on your graphic and show a preview for you to approve. If you like the result, click the Download Favicon button to download the newly-created favicon:



The favicon will be compressed inside a .zip file. Its name should be favicon.ico. Extract your favicon from the .zip file.

Upload the Favicon to Your Blog

The original way in which favicons worked was that Internet Explorer, whenever downloading a page from a web site, also attempted to download a file called "favicon.ico" from the web server's top level or "root" folder. To take advantage of this, we're going to upload the favicon you created to the top level folder of your blog's filesystem.

(Modern browsers still use this method, although there's a method that's more in line with web standards. Wikipedia's entry on favicons has the details.)

To upload the favicon to your blog, log into the Publisher Control Panel and click the File Manager tab in the Navigation Bar:



Make sure that the Home folder is the current folder:



Then upload the favicon.ico file:



Now view your blog. You should see the favicon appear in the address bar of your browser.

Your Blog's Filesystem

The Home folder -- the top-level folder -- of your blog's filesystem corresponds to the URL of your blog. For example, if your blog's URL is

http://myblog.myblogwareprovider.com/

then the URL of your Home folder is also

http://myblog.myblogwareprovider.com/

If your Home folder contains a favicon.ico file, the URL for that file is

http://myblog.myblogwareprovider.com/favicon.ico

...and if you were to type that URL into your browser's address bar, you'd be taken to a mostly-empty page containing your favicon.

If your Home folder contains a directory called layout, the URL for that directory would be

http://myblog.myblogwareprovider.com/layout/



At this point, it may seem to you that the filesystem of your blog is awfully similar to the filesystem of an ordinary web site. In fact, that's the case.

What this means is that you can use the filesystem of your blog to hold all kinds of things -- not just icons for your permalinks or favicons, but also:

• Picture files for inclusion in your blog entries
• Shockwave flash animations
• Banner ads
• Sound files
• Your resume in PDF or Microsoft Word format
• PowerPoint presentations
• MP3 files
• HTML pages

In the next installment of Blogware Mechanic, we'll cover some uses of your blog's filesystem.