Transparent Favicons Made Easy

I've had bad luck in the past with mediocre online favicon generators. They did a horrible job of resizing my file. I know that 16px by 16px doesn't give you much to work with. The worst feature, or lack of, was proper transparency.

Recently I came across a favicon generator that, I thought, performed very well. You can give it a try for yourself at: http://tools.dynamicdrive.com/favicon/ I made several example favicons from PNG files. You can see each of them below.
In Photoshop I created a new file (File -> New | 160 x 160 | Background: Transparent). Starting with an image at this size makes it a lot easier to work with your new icon. Once you're finished with your design, save your image "for web" (File -> Save For Web). After you select this option, you'll want to change the "Preset" value to "PNG-24" before saving. Saving it as a PNG file will allow for transparency in your design (JPEG files do not support transparency).

Here are my (FREE) samples.
Please feel free to use these for whatever you'd like!

7 Responses to “Transparent Favicons Made Easy”

  1. Zoltan says:

    Just found this this morning – very helpful little utility, just the thing I was looking for đŸ™‚

  2. Dom says:

    Thanks, thats what I was looking for!

  3. Mike says:

    Excellent, thank you very much for the link. I was struggling with bad photoshop plug ins and many different techniques to preserve transparency when I found this tool and did what I needed to do very quickly!

  4. Bob says:

    Nice one cheers

  5. Azamkl says:

    This is something that I was looking for a very long time ago.. finally.. found it. Thanks

  6. b2b says:

    I was not knowing about the transparent icon. This post helped me to create transparent favicon. I also got a wonderful utility to create transparent favicon. Thanks for this post…

  7. serdar says:

    thanks, it s running. PNG24 is good idea for transparent ico