Geeky Cat Miusings

See that little image of a cat next to my website’s URL in the address bar above? The little cat face is called a Favicon: a little custom icon that I made. It helps to visually identify your site - besides showing up in the address bar it will also display beside the page title when the page is saved as a bookmark and next to the page’s title in a tabbed browser.

One way to create the icon is by downloading this free plugin for Photoshop. Here is a link to a very good tutorial for creating favicons with Photoshop: http://www.photoshopsupport.com/tutorials/jennifer/favicon.html. There are also tutorials and plugins for creating the icon in Fireworks.

GoLive CS2 is able to make the icon without the need to install any plugins and it has the capability to create different sizes for the icon if your Photoshop source file has layers or layer sets as stated in this tutorial. This method has the added advantage of using the smart object technology - whenever you update the original image the icon will update as well.

The easiest way to make a favicon is by going to this site http://www.html-kit.com/favicon/ and uploading the image you want to convert - it will convert it to an icon for you to upload to your site.

While you can use a regular gif image for the favicon, it is best to use the icon format since it is recognized by all browsers. The icon format can hold several different images, all in one file with simpler images for different colour depths or larger images for placement on the desktop. See for yourself — drag the cat icon from the address bar to your desktop: the desktop image is twice the size of the image in the url. And now you have a shortcut to my website