Favicon: Why your website needs one

When you are going about your business on the Internet, have you wondered about the icon next to the title of the web page tab you are on and how it got there?  The design of that little icon is related to the artwork associated throughout the website you are on and is called a “favicon“.

Why do you need a favicon?  It allows you to brand your site and increase its prominence in your visitor’s Bookmarks or Favorites menu.  Graphical representations of your website, especially in browsers with hundreds of saved website links, will not only help visitors find the link to your website more easily but can allow them to visit your website more often.  What happens, then, if you stumble upon a website without a favicon?  Websites that do not have a favicon assigned to them will be provided with a generic favicon — a bland sheet of paper dog-eared at the upper right corner.

How can you make sure you brand your website with a custom, memorable favicon emblematic of your site?  By making a favicon of your own, of course!  There are many websites you can choose from to create a favicon, but I recommend Dynamic Drive’s FavIcon Generator.  The directions are relatively straightforward.

1. Browse your computer for the image you wish to turn into a favicon.  Make sure the image is in the file format .bmp, .gif, .jpg, or .png.  All icons will be saved in the file format .ico.  Do not select any of the options.  Click on the “Create Icon” button.
2. A preview of the favicon will be generated, displaying what it will look like in the address bar of the browser.  Even though the preview uses an address bar reminiscent of Internet Explorer 4 or 5, the favicon generated will look the same in Firefox, Google Chrome, or any other browser released after 2004.  Click on “Download FavIcon” and save the favicon to your hard drive.
3. In order for your new favicon, “favicon.ico”, to be seen on your website, you must upload it.  Connect to the web server hosting your site and upload the favicon to the root directory.  You may also upload it to the image folder of your site if you wish.
4. Depending on the markup used on your site (HTML or XHTML) or your browser preferences, you must insert the appropriate <link> tag in the HEAD section of all the web pages of your site.  Use this guide if necessary and make sure that the <link> tag contains all three attributes: rel, type, and href.
5. After you save the changes to your site, go through it with a few web browsers and make sure the favicon has been uploaded and referenced correctly.  If the favicon remains a dog-eared sheet of paper, the address contained in href may be incorrect and may not be pointing to the favicon’s location.

Remember, you’re creating a favicon for your website so that it stands out on your visitors’ web browsers.  Whether they add your site to their bookmarks or bookmark toolbar, a visual representation of your website will help them remember your site easier and access it more often.  If you want to brand your site on your visitors’ web browsers, start small with a favicon.

UPDATE: HTML-Kit, “a full-featured editor for HTML, XHTML, XML, CSS, JavaScript, PHP and other text files”, has made creating and inserting a favicon to your site a snap.  How quickly can you have a favicon up and running for your site?  According to their tutorial below, in under a minute:

 

Francis M. Unson

FacebookTwitterWordPress

— @ WiseStamp Signature. Get it now

 

Tags: .bmp, .gif, .ico, .jpg, .png, bookmark, branding, Chami, Dynamic Drive, favicon, favorite, html, HTML Kit, tutorial, web design, webmaster, XHTML