Creating Favorite Icons with a Transparent Background Using Photoshop
December 17th, 2007 by Mack
If you haven't noticed or cleared your Internet cache in a while, I have been working on some new logo concepts for the site. Anyway, after doing so I had to change the favorite icon too. I set out on my journey to find the perfect tutorial for creating favorite icons with transparent backgrounds. I tried a few different tricks and none of them worked flawless like I wanted.
So I kept doing some research and testing until I found a method that was easy enough to explain to anyone. Most of this tutorial is based on Windows XP and Adobe Photoshop CS2 illustrations, but you can use the menu through most of it if your on a Mac.
The ICO File Format Plugin for Photoshop
This is the secret behind the whole bit. So lets get started here.
Download Icon File Format Plugin for Windows or Mac
Once downloaded, Add ICOFormat.8bi to your Photoshop File Formats directory.
-
C:\Program Files\Adobe\Adobe Photoshop CS2\Plug-Ins\File Formats
Be sure to restart Photoshop so the plugin can load
The Image
Restart Photoshop and create a new 125x125 transparent RGB image.
Now create your image and leave the background transparent. Try to use as much of the blank canvas as you can.
Once you get finished with the design save your file as favicon.psd and then it is time to resize it to 16x16. Just go to Image » Image Size in your Photoshop menu.
Saving the Icon
Saving your new icon is rather straight forward. Just go to File » Save As and pick the .ICO format from the file type drop down list.
What if I don't have an option for the .ICO format?
This means your image mode is not set to RGB, wrongly installed the plugin, or forgot to restart Photoshop so it could load.
To correct the RGB problem simply go to Image » Mode in your top menu.
Related Post
- Add Mixx to the Wordpress Sociable 2.0 Plugin - You can add a Mixx icon to your Wordpress Sociable plugin in less than 5 minutes. I will provide both manual edits and modified files. Eit ...
- Add a Working Mixx Bookmark Icon to the Blogger/Blogspot Platform : Classic or Custom Templates - It literally took me about 2 hours to figure out the syntax for blogspot. I have no idea how people put up with that compared to a self-hosted ...
- CSS Image Replacement For Fixed Width Themes - Early on in my blogging career, I wrote a how to for css image replacement and today I am here to tell you that does not work for fixed width themes s ...
By Phil on Dec 21, 2007 | Reply
Great Tip - I was wondering how people did ...
Phil
By Mack on Dec 21, 2007 | Reply
For sure, I try to post them as I learn them. Thanks for your comment, Phil.
By SEO Rob on Dec 23, 2007 | Reply
Yesterday I saw an animated favicon.. It just sort of scrolled up 3 times and stopped.. I've been meaning to look into this.. Could be an idea for another story for you
By Mack on Dec 23, 2007 | Reply
Thanks rob, I will surely see what it takes to make that happen. If you run across that link with the anime, I would love for you to share it.
By Ped on Dec 30, 2007 | Reply
Some people make favicon's out of gif's hence why you might see animated one's. They don't have to be .ico format. you just have to make sure you link to them correctly in your tags.
By douwe on Jan 8, 2008 | Reply
I tried follow all your tips above, but my icon still doesn't have transparent background, but white.
By Mack on Jan 9, 2008 | Reply
did you start off with a transparent background from your original image?