August 15, 2007

Well being a web designer I’m a bit embarrassed to admit I didn’t learn how to create a favicon.ico till not long ago. I think I never really thought about it or realized how important they are. So what is a favicon, they are the tiny icons that appear in the address bar (in front of your URL) and in your bookmarks/favorites.

Great web design is not just about good color combinations, a nice layout, and cool graphics…it’s the details that separate ok from fantastic. Typically people use their logo for a favicon icon and that is what I would recommend. Ben Blogged does not really have a logo so I just used a design element found in my site. Well lets get started.

Photoshop Plugin

You need a special Photoshop plugin to save files as icons. You can download the plugin free from Telegraphics

Create Graphics

Favicon Icons are 16 x 16 pixels so either set your canvas size to that or if you need more room to create the design make your canvas size 32 x 32 or 64 x 64 pixels. Keep it simple because no matter what size you design it at you need to save it as 16 x 16 pixels.

Save Your Icon

Once your design is looking great select file, save as, and then select ICO (Windows Icon) from the format drop down menu. YOU MUST NAME IT favicon so your final file name will be favicon.ico

Note: For some reason you sometimes need to save your file as a gif or jpg first then save it as a icon.

Almost Done

Now you need to upload your fresh new favicon icon to your site. Most hosts/browsers will recognize the icon and do their thing but if you want to be safe you need to include the following code in the head section on each page <link rel=”Shortcut Icon” href=”favicon.ico”>

You are the Man/Woman

You just created your favicon icon and I bet you look and feel great. Now last but not least have a beer to celebrate! It’s Ben Blogged…

5 Comments »