How to create a Favicon Icon

 

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

fav_save2.jpg

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 »

 

5 Responses

  1. Flybetty wrote @ August 15th, 2007 at 11:43 am

    Just wondering about these displaying in IE. I have them working great in firefox but not IE.

    Thanks… love you work and thanks for the freebies :)

  2. BenBlogged wrote @ August 15th, 2007 at 12:04 pm

    Flybetty,

    Great Comment! I ran into the same problem and for IE6 they will only be displayed if your site has been added to the favorites. If anyone has a solution for this me and Flybetty would love to know.

  3. Benny wrote @ August 24th, 2007 at 5:22 pm

    Verry good tutorial :-)

  4. trupti wrote @ August 31st, 2007 at 7:56 am

    Great Tut. thanks :)

  5. Ray Hernandez wrote @ September 2nd, 2007 at 12:37 pm

    You can also just upload your image to a site like…
    http://www.html-kit.com/favicon/
    …that will convert any of your graphics to ico for you.

Comment