http://www.telegraphics.com.au/sw/
Do you want to create one of the those cool little custom icons for your website or blog? That's right, I'm talking about that little icon that shows up on most professional websites next to the URL and in the bookmark menu. Your site can be as cool as those sites! Follow the steps below to achieve pro status. Here is what you will need:
- A graphics program to design your icon logo. I recommend Adobe Photoshop.
- Somewhere to host your icon file in a permanent location. Plenty of sites offer this service free. Just do a Google search.
So, load up Photoshop or your favorite graphics program. The standard format for these icons is the infamous ICO file format. Photoshop actually doesn't output to a ICO, but you can still get by using PNG or GIF. We'll cover that in a moment. If you don't have Photoshop or something similar, plenty of freeware programs are available online. A really good free program is GiMP. You can find out more about GiMP here: http://www.gimp.org/. I'm not sure if that does ICO output either, it doesn't really matter. Use ze Googz.
- Create a new document in your graphics program at either 16x16 or 32x32 pixels. I chose 32x32 just because I like higher resolution. I understand that old browsers may not be able to load the icon, but this is not my dilemma. People need to update their browsers! Design your logo.
- Save your design as a .ICO, .PNG. or a .GIF. These are the ONLY supported file formats.
- Upload the file to a permanent location that you can directly link to. I chose: http://www.androidvoid.com/ryanswright/webicon.png
- In Blogger, login to your profile and click 'Layout'. At the following page, click on 'Edit HTML' at the top of the screen. Toward the top of the HTML editing box, you will find some text reading:
- Copy one of the following HTML codes according to your image file types:
.ICO: <link href='URL of your icon file' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
.PNG: <link href='URL of your icon file' rel='shortcut icon' type='image/png'/>
.GIF:: <link href='URL of your icon file' rel='shortcut icon' type='image/gif'/>
- Once you copy the correct line, simply paste it into the HTML field just underneath . Make sure you place the URL to where you're hosting your icon file.
Your Blogger code should look something like this:
<title><data:blog.pageTitle/></title>
<link href='http://www.androidvoid.com/ryanswright/webicon.png' rel='shortcut icon' type='image/png'/>
Please leave a comment if you have have any questions.
