Change your blog’s icon
Have you noticed an Icon appearing right before where your blog’s complete URL is? See top of your browser which has something like this » 
Well, in the above case is just my customized FavIcon here in my blog at GuideToBlogs. You can also change yours. There are two different ways: either plain icon (static) or an animated icon. Well here’s how you do it:
- First you have to choose your desired icon, of course. You can create an icon on your own by initially designing it through a Photo Editing Software like Adobe Photoshop or even MS Paint. Save it first as either GIF or JPEG. If you need to set its transparency, then better choose a GIF format and edit to transparent.
- After you’ve made a choice on what image to use, follow this website URL » HTML-KIT.com. They offer different HTML kits and one of them is HTML FavIcon. Upload your image. Leave the "Scrolling Text (optional)" field blank then click on the "Generate FavIcon.ico" button.
- After the website finishes processing your icon, download your FavIcon and save it first in your hard drive then extract your icon from the compressed file. If your blog is allowed to upload files such as ICON files, then upload it and take note of its location. For instance, the file is uploaded in your blog’s image directory such as » "images/favicon.ico", this shall be the source we’ll be using later. But, if your blog does not allow uploading of files other than JPEG, GIF, or PNG, you may use a free web hosting site just for storing files purposes. You can register at FreeWebTown.com or the like, and upload your icon file.
- Finally, when you already have your link to your icon file, insert this code in your blog’s header, right below your blog’s HTML <HEAD> tag: <link rel="shortcut icon" href="favicon.ico" >
where the href is the URL and the name of the icon to be used. Then, visit your blog and you may already be able to see your icon changed.
- Animated icon is just an Animated GIF wherein you may edit on your own or download on different websites offering Animated GIFs. You can search on Google such as the following keywords: free animated gif. You may also create your own animation using GIF Animation editors such as Macromedia Flash, or much more favorable (recommended by me), Jasc Animation Shop. Jasc allows lots of features such as predefined animation effects. (Notice my icon, it’s called the Stained Glass effect)
- When you’re done editing, be sure to resize the animated image to 16x16 resolution. This rather allows the image to be supported in your browser and allows also to save space (since Animated GIFs usually have higher sizes in KB).
- Upload your animated image file (follow Step 3 in the above procedures under Plain Icon).
- Finally, rather than the HTML code as used in the Step 4 above, use this code: <link rel="icon" href="images/animated_favicon1.gif" type="image/gif" > where href is the location and name of the animated gif. Just replace animated_favicon1.gif with the name you used to save the file. Then view your icon changed because you’re already done!
Were you able to get it right? If you have comments or questions, just leave your message here. Also, you may leave your links here so that we may also be able to see your blog’s icon.
Regards,
Ronald Borla
