Favicon - What is it?

Posted in:

June 15, 2008

Favicons - also known as favorites icons or website icons - are widely underused. These icons are associated with a url and are often displayed in the browser’s url bar, in the list or bookmarks, or even next to the page name in a browser’s tabbed interface. Additionally, when a url shortcut is placed on the desktop of Window’s operating systems, the favicon is also used to designate the site.

If a particular site does not have a favorites icon, an image resembling a blank white page is often displayed. Additionally, if you analyze your log/error files, you will notice lots of failed requests - 404 File Not Found errors - for a favicon.ico file. So, how do you create a favorites icon?

Well, the first thing you’ll need to do is select an image that you’d like to use. Open your image editor and scale or crop it to 16×16 pixels or 32×32 pixels. (Other square dimensions may work, but those listed here are standard.) Now, for maximum compatibility, save the file as in the .ico format. If this is not possible, you may alternatively save your image as a .gif or .png file using 256 colors setting.

You will also need to add some code within the <head> tags of your pages. See the example below:

<link rel="shortcut icon" href="http://www.url.com/favicon.ico" type="image/x-icon" />

If you have opted to save your file as a .gif or .png, be sure to edit the code above to include the right file ending, as well as your website’s url.

When done, simply upload your favorites icon and your revised files.

Clearly, favorites icons are not essential to your website’s operation. In fact, few visitors will even notice its existence. However, we do recommend their use. One large benefit for using them is that creating one can save your site some bandwidth. For example, if you have a custom 404 File Not Found error page, that file will be sent by your web server everytime there is a request for a nonexistent favicon.ico file. And if you have a lot of traffic to your site, this excess expenditure of bandwidth can get costly. But above all, we recommend creating favorites icons because it adds to the professionalism of a website.

Bookmark or Subscribe

Did you find this article useful? Why not Digg it or Stumble it. Maybe you found it to be Delicious? Even better, why don't you subscribe to our feed so you can get the latest from this blog. If you prefer you can subscribe to this article's comments feed.

Tags: favicon

Trackbacks

Trackback URL for this entry:
http://www.velvetblues.com/web-development-blog/favicon-what-is-it/trackback/

Subscribe by Email or RSS
Want to be notified of new entries? Just enter your email address below. Our feed is delivered by FeedBurner.

Recommended Hosting Company
We've worked with dozens of hosts. Yet, we prefer HostGator. Click here or on the image below to go directly to their site.