Tips for Creating a Favicon

July 31, 2007 | 11:25 a.m. CDT

I recently needed to create a favicon for a website and it had been awhile since I created one and I couldn’t remember what program I used last time I did it. I did remember however that you can’t just create a gif and rename it to an .ico file.

I searched the web and found a couple of helpful websites. Jonathan Snook had a good article that was a good start. He recommend to different programs in his article. The first one that I tried was one that was recommend in the comments, png2ico. The only problem I ran into with it was that it didn't seem to work very well with pngs that alpha-transiencies in them. So I switched to using the one recommended on Jonathan's website that was a Photoshop plugin.

The plugin for Photoshop worked great and created ico files from the pngs with alpha-transparencies just fine. I then used the ICO Bundle utility to bundle my 16x16, 32x32 and 64x64 png icons into a single .ico file. However, the next problem that I ran into was that in Internet Explorer 6 the favicon didn't seem to work with any of the favicons that I created that had an alpha-transparencies in them. So ultimately in the end, I just decided to give up and just use a solid white background with no transparency in my favicon. If anyone is able to get their favicon to work with an alpha-transiency in IE 6 I would love to know how you did it.

Also, as an extra tip it should be noted that I wasn't able to get my favicon to show up in IE 6 unless I deleted IE 6's cache and closed IE, re-opened IE, then saved the site as a favorite, and then closed and re-opened IE.

Another problem that I ran into was that when I bookmarked the site I created the favicon for, it wasn’t showing up in my bookmark list in Firefox. After some playing around I figured out that it doesn’t work unless the favicon is under 20k in size. Even then you have to bookmark the site and then refresh the page before the the favicon shows up.

The favicon that I created wasn’t for an entire domain but just a sub-directory so I couldn’t just place place the favicon in the root of my website. Instead what I did was I placed the favicon in an images folder and linked to it in the head section for every page that I wanted to have the favicon show up on. After reading the wikipedia article on favions I discovered that if you don’t link to the favicon using both of the following link tags that the favicon might not work in some web browsers.

<link rel="shortcut icon" href="http://yourdomain.com/media/images/favicon.ico" type="image/x-icon" />
<link rel="icon" href="http://yourdomain.com/media/images/favicon.ico" type="image/x-icon" />

I have decided that making favicons is a pain in the butt! But hopefully my post will save someone else some time and hopefully it will save me some time the next time I need to create a favicon.

Related tags: Design, favicon, Web


1.   At 1:24 p.m. CST on Jan. 1, 2008, Jordan wrote:

Thanks for posting this article! It really helped me create an icon for v2!

Comments are closed.

Comments have been close for this post.