Tutorial Thursday
To make your site look professional you probably want to have a nice favicon. A favicon is the little image you see in the Address Bar when you view a site and may also be displayed on tabs if your browser supports that.
To create a favicon that has some transparency takes a few extra steps but it isn’t that hard. Here are the few things that you need to do:
- Create an icon for your site that is either 32 x 32 pixels or 16 x 16 pixels and add some transparency to it. This can be done in Photoshop or many other imaging programs, and when you are finished save it as a PNG image file.
- Download png2ico and extract the contents of the ZIP file (here is the homepage for png2ico but they don’t provide much information there). The program does not need to be installed and runs via the command line.
- The easiest thing to do is copy the PNG icon that you made in step one and the png2ico.exe file to the root of your hard drive. It isn’t necessary to copy the other files because they are just documentation.
- Open the Command Prompt by going to Start -> Run, type in cmd and press Enter. Change to the directory that the png2ico.exe file is located in, which for me is the root of the hard drive.
- Now you have to enter in the command for processing your transparent PNG image file and converting it to an ICO file:
png2ico favicon.ico Icon32x32.png
You now have a wonderful transparent icon to use on your site. Just place the favicon.ico file at the root of your website and you’ll be all set!
| Update: |
As “The Rooster” points out in the comments Dynamic Drive has a nice site put together for those people that are looking for a quick solution to generate transparent Favicons. Most online Favicon generators that I have seen don’t support transparency but this one does, so it definitely deserves a bookmark.
|
Errrr that does seem to be very complicated when you could just go here:
[tools.dynamicdrive.com]
or here
[chami.com]
and create it from any image on your PC and generate it in seconds. I might be missing something but this seems to be far simpler to me.
The second one that you listed I don’t believe supports transparency, but the Dynamic Drive one actually does which really surprises me. Several online Favicon generators that I have used normally don’t support transparency which makes the icons look ugly when they are on tabs or something.
I still like to use that program because I pretty frequently generate favicons so it is nice to have the software to do it, but I’m going to add the Dynamic Drive link to the post. Thanks!
man, you don’t even need to create an ico file. you can just use straight png.
i do it on all my sites. just add something like this…
<head>
<link rel=”icon” type=”image/png” href=”images/favicon.png” />
</head>
Hey that is pretty cool, NP. I was not trying to be a smart arse, but I read the post and I was like whoa… dude, don’t invent the wheel.
I am constantly looking for short-cuts to do things, our podcast is aimed at “users” as opposed to coders or people skilled at projects like you describe. This is a very good example of the fact that regular “users” can do great things if they have the resources and know where to get them.
Its just simple!
Open your jpeg/bmp file in photoshop and change into png!
Then use command prompt to make ico..
For making transparent..make sure you remove the background with magic wand tool or other tools in photoshop.
THATS it!
Thanks hackit08..
I really appreciated !