FruitNotes beta

Your All-in-One Online Notebook

How to generate favicon for your site

Last updated at (Fri Jul 04 2008 15:01:06)

Posted by: Nitin Gupta

Bookmark on FruitNotes

reference: http://www.tutorial5.com/content/view/88/52/

How to create a favicon ico file

Written by Daniel

Favicon is short for 'Favorite Icon.' A Favicon is a multi-resolution image included on nearly all professional developed sites. In most browsers the Favicon ICO file is displayed on the Address line, in the Favorites menu or next to the page title in a tabbed document browsing. The Favicon allows the webmaster to give a personal touch to their website, and to create a more customized appearance within a visitor's browser. Often, the Favicon reflects the look and feel of the web site or the organization's logo matching its colors and general feel.

Every webmaster should always create favicons for everysite they are building. It is consider an act of professionalism and it also gives a personal touch to one's website.
The favicon file is very small in size (16x16 pixels) and should contain some small text or image. Webmasters usualy use the website's logo or its main name.
To start of I am going to present several ways in witch one can create favicons.

Easy to use on-line favicon generator

In my search for a favicon generator I found several ways/methods of building/creating one. The fastest one is building a text favicon.
This website antifavicon offers a really nice and fast way for creating a really simple favicon. You only need to enter small text, chose your colors and the software creates your favicon on the fly. This is one route you can use and it is very fast and easy to use.

Create a favicon using your favorite graphics software

Lets asume you want to make your favicon special and not use the online generation tool.
All you need to do is fire up your favorite graphics software and start working.
Remember the favicon is really small, only 16x16pixels, and i dont think anyone can decently create something on that size. So to make things a bit easy you should start of by creating a document lets say 64x64pixels. I am using 64 becouse its a multiple of 16. You should work with whatever size your are comfterbul with, but that has to be a multiple of 16. Now that you have created your main image for the favicon you should scale it down to 16x16 px. If that doesnt look good (ie. blurry) you should go back, edit and size down again.
Now you should save your file in a PNG format. Just chose File>Save As and then selected the PNG format from the extensions list.

If you are using Photoshop in creating the favicon you must know that there is a special plugin that allows you to save files in direct ICO format from Photoshop; download the plugin.
Be advised that for this to work you have to load the plugin into Photoshop, restart it and then open the file you just created and save it in the ICO format naming it favicon.ico

Convert image to ICO format online

For all i know you could also be using Paint to create your favicon so lets asume you dont have Photoshop and the special plugin. There are a bunch of online tools that let you upload a PNG file and convert it to a ICO file.
Icon sushi is an online image to icon converter that supports the mask editor and the creation of Windows XP 32bit/Windows Vista format icons. It can also convert icon files to image files if anyone finds that helpfull.
Converticon is another online converter that does just about the same thing as suchi. It .convert s ICO to PNG or PNG to ICO.
Chami is another website that converts most image formats to ICO files online.

Convert image to ICO format with software

If for exampe you need more control over the way your files are converted you should install proper software that those the converting onsite and you can manage it more accurately.
I have compiled a small list of the most popular and used software applications used for creating a FAVICON.
IrfanView is a very fast, small, compact and innovative FREEWARE (for non-commercial use) graphic viewer for Windows.
MovieGear is also used for creating animated GIF files that can also translate to animated FAVICONs.

How to use a favicon in your site

Now that you have created your final favicon.ico file you should add it to your sites functionality.
The original way of defining a favicon was by placing it in the root directory of your site. Later a more flexible system was created, using HTML, it is now possible to indicate the location of an icon for any given page. This is achieved using the link element in <head> the section of the document.

In this way, any appropriately sized (16×16 pixels or larger) image can be used, and although many still use the .ico format, other browsers now also support the GIF and PNG image formats.

So now all you have to do is upload the favicon.ico file on your webserver and add the HTML code posted up in the <head> section of your site. Note that you could also use PNG or GIF formats for your favicon but ICO is a standard format accepted by all browsers. Also note that you can also specify the location of the favicon but the standard is keeping it in your website root directory.

If you are running out of ideeas when creating the small image document have a look through this nice collection of favicons. Also look at the nice categorized list of 50 remarkable favicons at Smashing Magazine.

I hope you enjoyed this tutorial and build beautiful FAVICONS.

Rate this blog