Wednesday, November 25, 2009

Custom Blogger Favicon


Having a blog in blogger.com or the so called "blogspot" blog is very handy. Any one can blog using blogger because of its simplicity. 


And it is so simple because you don't have to think most of anything like hosting, design, domain and etc. So I decided to have my blog with Blogger.com as part of my "back to basic" mindset.


With Blogger.com, your blog will have a default favicon of white "B" in an orange rounded rectangle. I'm not happy with that and I want to change it. Just to change hehe. It's not that hard though.


 It's like having a custom favicon for your self-hosted site. The only difference is, unlike if you have your own hosting account, you cannot host your .ico file inside your Blogger account. So you have to host it somewhere. Once your .ico file is uploaded on the internet, just do the coding on your Blogger.com blog's head section and point to your .ico address.


Here's some tip for you to try:

  1. Create an image that you want to be your favicon using Adobe Photoshop. Save it as .jpg, .png or .gif. 
  2. Make it an .ico file with Dynamic Drive Favicon Generator and download the generated favicon to your computer.
  3. Upload it to merrypic.com and get the direct link of it.
  4. Go to your Blogger.com blog's "Edit HTML" inside the "Layout" settings and use your uploaded favicon url to link it to your blog. See instructions on how to edit your template code here.
  5. Save your template and your new custom favicon is set.
If you don't see your new favicon on your browser, just refresh, ctrl+f5, restart, or clear your browser's cache. Or use another newer browser. :)


No comments: