Change your blog’s icon

March 31, 2008

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 » icon in browser

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:

Plain icon

  1. 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.
  2. 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.
  3. 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.
  4. 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. emoticon

Animated Icon

  1. 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)
  2. 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).
  3. Upload your animated image file (follow Step 3 in the above procedures under Plain Icon).
  4. 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! emoticon

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

4 Comments »

The URI to TrackBack this entry is: http://guidetoblogs.blogsome.com/2008/03/31/change-your-blogs-icon/trackback/

  1. http://uber.blogsome.com weeeeeeee check out my website!

    Comment by Patrick — March 31, 2008 @ 10:23 am

  2. well I’ve been thinking of this for a while… And the answer just came…hahaha… thanks borly! you rock! hahaha… new blog napud diay ka ha…
    eaad ako blogs be sa imo wordpress, sa arttis think alike ug dri..mao ni oh:
    http://dayday.blogsome.com
    http://konohashinobi.blogsome.com
    http://suicidalideation.blogsome.com/
    http://licensedtoblog.blogspot.com/
    http://konohaninja.wordpress.com/

    Please borla… echeck jud nako na..hehehe..bantay lng..ana baya jud ka ha…
    na add na tika

    Comment by jay edward — March 31, 2008 @ 10:38 am

  3. awh…ana gani koh ron!

    http://cutekhartz.blogsome.com

    Comment by karen — March 31, 2008 @ 2:52 pm

  4. Check mine too just by clicking here

    Comment by quesera — April 1, 2008 @ 9:39 am

RSS feed for comments on this post.

Leave a comment

Line and paragraph breaks automatic, e-mail address never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>



Anti-spam measure: please retype the above text into the box provided.

Get free blog up and running in minutes with Blogsome
Theme designed by Viewfinder Design