Favicon.Ico for your Website
The favicon.ico is the online counterpart of a business card. It is something that you keep on hand, like business cards in a counter jar, for visitors of your site to get if they wish to have a means of getting back in touch. It is one that interested site visitors keep in their web browsers’ bookmarks, as they would keep a business card in their wallet, to be seen or remembered then pulled out when they need the products, services or information you offer in your website.
Like the business card, the favicon.ico is a simple marketing tool the latent power and importance of which you should never underestimate – but now we are getting ahead of ourselves. First of all, let us ask and answer the obvious question: exactly what is a favicon.ico?
What is a Favicon?
Open your favorite web browser and load Google, Yahoo, MSN, Facebook, Wikipedia, and YouTube. Whenever one of these sites loads in your browser, look at the URL bar. Do you notice the small image beside the website address? That is a favicon. The favicon for the above-mentioned sites look like the following:
You can also see that the favicon for this site looks like this:
The term favicon stands for “favorites icon.” It is a 16×16-pixel image (may also be 32×32) that acts like a small badge or ID for a website. It was originally introduced to give distinction to web page links saved or added to Favorites by Internet Explorer users. Through time and as more browsers started supporting the favicon, the favicon’s meaning and use changed.
A favicon is no longer just an icon to distinguish a web page or website from a long list of favorites, although this remains one of its most important functions to date. Nowadays, you will also see a site’s favicon beside the web address in the URL bar. In browsers that support multiple tabbing, moreover, the favicon also appears beside the page title at the top of an open tab.
The Favicon.ico
“But what is the favicon.ico?” you ask. The favicon.ico is simply a favicon in the .ICO format, the file format for icons in a Microsoft Windows system. The favicon.ico is the standard and ideal favicon format because it is universally accepted and supported by web browsers. For instance, while Mozilla Firefox can support .PNG, .GIF (even animated .GIF) and .JPEG formats plus the .ICO format, Internet Explorer has support only for .ICO.
Where do you see a Favicon?
A favicon, if present, can be seen in four places.
- As above mentioned, you will see it in the URL bar and beside the actual website address. Check out the example below:
- You will also see it beside the title of a web page that you have saved to your Favorites (IE) or Bookmark Menu (Mozilla Firefox) folder. Check the example below:
- If you have a tabbed browser (i.e. it lets you open multiple web pages in a single browser window), the top of each open tab should show the favicon beside the site title.
- If you are using Mozilla Firefox, there is one other place where you should be able to see site favicons. If your bookmarked sites in your Bookmark Toolbar have favicons, you should be able to see these bookmarked sites’ favicons below your browser’s URL bar. See favicons highlighted in yellow below:
Creation and Implementation of a Favicon.ico
The easiest way of creating your own favicon.ico is to create an image through Photoshop, Illustrator, IrfanView, GIMP, or any other image-editing software.
- Create a blank canvas
Once you have loaded your software, create a new file. You are not advised to create a 16×16 image to start with as it will be very difficult to design an image that small; create a 64×64, 128×128 or 256×256 pixel canvas instead. The only condition for choosing your initial image size is that it be perfectly square and that you choose dimensions that are a multiple of 16 to minimize image distortion when reducing size later on. - Draw your image
Now, you should draw whatever image you want on your blank canvas. Some people simply fill it with a dark background color or gradient then add a light-colored, simple shape at the center. You can do this easily through Photoshop with its Custom Shape tool and Shapes option. If you want your favicon to be really unique, however, you are advised to create an entirely new image. - Save your image
For the sake of simplicity, give your favicon the filename “favicon”. In actuality, you can call it anything you want. Save the file as a .JPEG or .BMP or .PNG. At this stage, you should save a raw version (e.g. .PSD or .XCF) of your image for editing later. - Resize your image
After saving your image, resize it to the actual favicon size, resample it and convert it to 16×16 pixels. You should use the resample function rather than simple resize so that distortions to image quality will be minimized. - Convert your image to .ICO
To do this in your own computer, your image-editing software should have support for .ICO. If this is not the case, then you may download a utility from telegraphics.com.au/sw/. This plug-in works with almost all popular graphics software; once installed properly, you should be able to see an option to save your file in the .ICO format.One other alternative if you don’t want to download and install the plug-in is to use a web-based .ICO converter or favicon.ico generator. Some of the sites you can visit for this purpose include Convertico.com, Chami.com, Genfavicon.com and Favicon.co.uk. In these web-based favicon.ico generators, all you’ll have to do is upload the image from your computer and the favicon generator will produce a ready-to-use favicon.ico file for you to download and add to your own website. - Upload your favicon.ico to your web server or to an image host
The easy way is to simply upload your favicon.ico to your website’s root folder; in this case, its address will be something like this: yoursite.com/favicon.ico. You may also upload your favicon.ico to your images folder or whatever directory of the site you wish so that its address will be something like this: yoursite.com/directory/favicon.ico. You may also upload your favicon.ico file to an image-hosting site like Photobucket or ImageShack. In this case, the address will be something like http://www.imagesharingsite.com/youraccount/favicon.ico. - Direct web browsers to your favicon.ico
Most browsers can now automatically detect the presence of a favicon.ico file, especially if it is stored in the root folder of the site directory. It is still best, however, to tell the browsers where your favicon.ico file is so that they can fetch it without any problems. To do this, you will need to do a little bit of coding. If you are using plain html, you should open your index.html file; if you are using dynamic pages like that of WordPress, you should open your header template. Anywhere between the opening and closing notations, insert a line like one of the following codes (from: Wikipedia).
Tags: favicon, website tips
