A Favicon is an icon that is relevant to your website and can often represent your website in locations such as the URL or Navigation bar of the browser, next to bookmarks or favorites in the browser. Favicons were originally used by Microsoft’s Internet Explorer and are short for Favorite Icon since Internet Explorer refers to bookmarks as Favorites. For that very reason they can also be known as shortcut icons or bookmark icons.
A Favicon is generally displayed in several places depending on the browser which may include:
- Next to the URL in the Navigation bar
- In the Tab for the website
- As a desktop icon for shortcuts to the website
- In the bookmarks or favorites of the web browser
Originally to use a favicon your website had to place a file in the root directory called “favicon.ico”. Now you can include a favicon on a page using a link tag in the header that looks as follows:
<link rel="shortcut icon" href="http://webstartavenue.com/wp-content/uploads/2011/10/favicon.ico" />
The above is the actual tag in this site’s header. This directs the browser to use the favicon at the specified location. The link tag method above is now the preferred method and has been standardized by the World Wide Web Consortium.
Format of a Favicon Image
Traditionally favicons were in the Microsoft ICON format, these files typically end in “.ico”. The .ico format is a modified version of the original bitmap format, .bmp that additionally supports multiple resolutions. A multiresolution .ico file would have several different versions of single image and would display the best possible version depending on the size of the image requested. The ICON format also adds transparency to the BMP format which can allow for some more artistic icons.
While some browsers now support other formats including PNG, GIF, and JPG as favicons the original ICON format is still recommend for cross browser compatibility.
The favicon was originally only used in the bookmarks and navigation bar of Internet Explorer with a size of 16 by 16 pixels. Today the favicon can be used in a number of other scenarios including desktop icons or when references on other websites. To account for all the different situations it is recommend that you package a favicon at each side inside of the ICON file. To do this you’ll need to take advantage of the ICON format’s ability to handle multiple resolutions. The most common resolutions to package in a favicon file are 16×16, 32×32, 48×48, and 128×128.
Importance of a Favicon
Adding a favicon to your website may be more important than you think. One of the most obvious reasons is for perception since most websites sport favicons overlooking it might put you behind your competition.
Additionally, not having a favicon, the browser will still request one from the root directory for historical purposes and if your site doesn’t have one then it will load your 404 or page not found error page. This error page can often take much longer to load then a simple icon and can slow down your website’s responsiveness.
Favicons for Mobile Devices
Currently there is no standard for favicons for mobile or tablet devices but the impotence is there. It is clear that with the web becoming more and more prominent and mobile devices enhancing their browsing experience in combination with the proliferation of touch devices, the favicon will represent your website even more.
Apple has pioneered the latest favicon expansion creating a new tag to signal an image to be used as the touch icon for shortcuts to the website. These icons fall under a completely different set of recommendations than the original favicon however. The Apple touch icon is now recommended to be a 114×144 pixel PNG image and can be reference from within your websites HEAD tags as such:
<link rel="apple-touch-icon" href="http://webstartavenue.com/wp-content/uploads/2011/10/favicon.png" />Apple will automatically add rounded corners and the obligatory glossy look, if you don’t want this added to your icon you can use the following rel attribute instead:
rel="apple-touch-icon-precomposed"The Future of the Favicon
The HTML5 upcoming standard promises a much needed update to this very important icon. The current draft of the standard includes a new link tag using rel=”icon” and allowing the image to be of any type by specifying it via type and size attributes. Unfortunately we’ll still be using the old standard for the years to come until the new standard gains significant traction.
Favicons are Small but Memorable
Favicons are small, typically only being displayed at 16×16 pixels but think of them as the equivalent of a desktop icon for your website. With so little space to work with don’t try to overcrowd them or create unrecognizable shapes but at the same time don’t use a simple shape that cannot be associated with your site. Choose a concept that will look good at several sizes, perhaps a simplified version of your website’s icon or an abbreviation for your site. Choose only a few colors, an icon with too many colors may not show up correctly on all browsers and may be disorienting.
How to Create a Favicon
Generally make sure you have a quality image to start with and then there are several services to convert your file to the ICON format. A common service to convert files is from Dynamic Drive. This service will take an image and convert it to an ICON format and then you’ll just need to download and upload it to your website’s root directory and name it favicon.ico.
If your on the WordPress platform then there are several plugins that can manage your favicon for you including one plugin authored by WebStartAvenue. The WSA Favicon WordPress plugin can take a GIF, PNG, or JPG image and convert it to a multiresolution ICON format with transparency supported and insert the proper link tags into your website’s HEAD tags. Setting up a favicon on your site couldn’t be easier!
