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!
December 9th, 2007 at 5:32 pm
Just found this this morning - very helpful little utility, just the thing I was looking for
December 9th, 2007 at 6:03 pm
Thanks, thats what I was looking for!
September 16th, 2008 at 6:56 pm
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!