Learn more about Tyler Dockery, and the Dockery Design team at www.DockeryDesign.com.

Make A Transparent Favicon or Windows Icon


I received a call from one of our clients this week asking for some transparent icons. He had used an online favicon generator to create some windows icons for his networking services, but the service has flattened his image and placed a solid, white background behind his materials

Well, yesterday, I tried make a transparent favicon for his needs. And when i saw the supposedly “transparent favicon” on the bookmarks bar, it had a hideous white squared top to it… and that made me think… there HAS to be a way to make that file transparent.

If you are unfamiliar with how to make a favicon, or animated favicon, please be sure to download my whitepaper Creating Custom Favicons: a step by step approach for designers of all levels from the resources section of the Dockery Design website.

Thanks to a photoshop transparency technique and the “ICO (Windows Icon) Format” plug-in that you can find a link to within my whitepaper Creating Custom Favicons: a step by step approach for designers of all levels I was able to make a favicon.ico file that is transparent, and looks good in both places!!!

1. Create the graphic you want to use… preferrably work on a 32 x 32 pixel image
2. Size it to 16 x 16 pixels for use as a favicon or transparent favicon
3. Change the color mode to indexed
4. Export it using the Gif89a plug-in or photoshop’s built in “save for web” and make the background color your knockout color.
5. Save this file as a gif. then close the file
6. Re-open the file, and now, simply “Save As” and choose “windows icon, ico”… VOILA you have a transparent favicon.ico file
7. Now follow the instructions mentioned in this whitepaper, and you should be set!

Hoe does your favicon look? Send us a link to your site!

42 comments to Make A Transparent Favicon or Windows Icon

Leave a Reply

 

 

Spam protection by WP Captcha-Free