Thursday, May 31, 2007

Branding with Favicon & How to Create a Favicon in Photoshop

Favicon is short for 'Favorites Icon'. Favicon reflects the look and feel of the web site or the organization's logo & create a strong online branding. Within any browser the favicon is displayed on the address line and as well as in the Favorites menu. It creates a more customized appearance within a visitor's browser. It’s an image of 16 pixels by 16 pixels in size.

All you need to add a Favicon to your site is a Windows Icon (.ico) file called name.ico that you upload to the main directory of your website

Download the Plugin
You'll need the Windows Icon (ICO) file format Photoshop Plugin to export to the .ico file format. You can download the plugin from Telegraphics. The plugin reads and writes ICO files in 1, 4 and 8-bit Indexed and 24-bit RGB modes, and also reads and writes 32-bit "XP" icons (with 8-bit alpha channel). Make sure to install the plugin before you begin the design.

The Design
If you already have a logo, Start works in a 64x64 Pixel canvas. Once you finalized the design you should reduce it to the 16 x 16 size. Always try creating a simple design that incorporates colors from your website's palette. You have to try & try to give a good look for your favicon.

Saving The Custom Icon
Go to File>Save As and make sure you name the file favicon.ico. Under Format you must choose Windows Icon (ICO) from the pulldown menu. This format will only be available in Photoshop after you download and install the plugin. In the next step you'll need to upload this new file to the root folder of your website.

Uploading The Favicon.ico File
Connect to your server and upload your Favicon.ico file to your website. You must place it into the same directory as your home (index) page, and leave it loose, making sure not to put it in an images directory or other folder.

.ico plugin forPhotoshop: Telegraphics

How to add a Favicon to your site: W3c.org

No comments: