( I follow everyone back who follows me. ♥ )

Monday, July 25, 2011

How to Change the default Blogger Icon with your Own?

Changing the Favicon in your blog's URL is one way to customize your site. This make your blog site more personalized.  Favicon is a small icon/ or symbol located at the left of your Blogger site's Web address. The default image of the favicon is the orange Blogger B symbol. You can change the favicon of your site whenever you like. Just follow these easy steps:

  1. Create/ or select an icon of your own. It could be your very own logo. Make sure that the image is sized at 16 x 16 pixels.
  2. Now log in to your Blogger control panel, go to the layout panel of the blog you want to customize. Go to the 'Design Tab', Select ‘Edit HTML’.
  3. Look for the code: <link href=’FaviconURL’ rel=’shortcut icon’ type='image/vnd.microsoft.icon'/> This should be available on your editor. (select ‘Ctrl + F’ and search for 'favicon' to find it easily)
  4. Once you’ve found it, replace this portion href=’FaviconURL with the link that you copy from the free hosting site.  
sample: <link href='http://img827.imageshack.us/img827/5516/newfavicon.png' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Click "Save Template. Your new favicon should now appear in your URL window, at the top left corner of your browser.  

11 comments:

  1. You can also do it without changing/adding the code :) Just look for the favicon in page elements and click "add". You can then upload your photo.

    ReplyDelete
  2. Hi Algene, yep you can do so as long as the feature is available on you're theme. Design > Page elements. But if not, you'll have to do it manually/ or code it. *wink

    thanks!

    ReplyDelete
  3. I converted an image (JPG) to icon (ICO) but it didn't work :(

    ReplyDelete
  4. I got so excited when they allowed this feature in Blogger. Now it's easier to add a Favicon in Blogger than in Wordpress :)

    ReplyDelete
  5. nagawa ko to before when I was in blogger pa..but in wp, it's pretty much easier.. ;D

    ReplyDelete
  6. Cool tips, I love messing around with codes!

    ReplyDelete
  7. this is cool, now I can change my blogspot default favicon...

    ReplyDelete
  8. I never bothered to tweak this part of blogger blog before. I think I am going do some modification in a few. Thanks!

    ReplyDelete
  9. this is an informative post. however, i guess i suck at following directions when it comes to techie stuff - i can't make it work. ganun din sa paglagay ng G+ kaya wala pa ako nun sa blog ko huhu

    ReplyDelete
  10. I already change my fav icon of my site. It's nice. One thing to put in mind in doing this stuff is to make your picture into a fitted size as required and then into a square shape. That's it.

    ReplyDelete
  11. great tutorial!!! thanks for the tips!

    ReplyDelete

Use the 'post a comment' section at the top of this post to share your thoughts. Your comments are what makes this thing fun! I LOVE to hear from you and do my best to respond to everyone! THANK YOU!
 
google-site-verification: google1bceb82f6129bfec.html