Wednesday, July 20, 2011

Adding a Blogger Favicon

Are you guys ready for another blog design tip? (You can click on the image below if you'd like to see all the post in this series.)

 
I was SO excited to see that Blogger added a new favicon feature! (If you don't know, a favicon is the little image that is next to your web address.)  Favicon are fun to have because they help your blog stand out from others when in a list of bookmarks or on a blogroll.  I have done favicons in the past using html hacks and haven't been very happy with the results.  But Blogger has made it SO easy to add now, and the best part, it works!

(Note:  if you have hacked your html to add a favicon in the past, you may have to remove that coding before this method will work)

So, first you need to create an image.  This can even be done in paint.  I created mine at 160 x 160.  The size really doesn't matter because blogger will shrink it.  Just keep it small so that its easy to load.  I recommend a simple image.  Because a favicon is so small you can't really see a lot of detail anyway.

Sign into Blogger and go to your elements page.


See the new little gadget.  Ahhhh... love you blogger!

Click on edit.


Browse for the image that you have saved.  (Yes, a jpeg image will work)  Hit save.


Blogger will resize it to fit.  You now see your little favicon image on the gadget.

Hit save and view your blog and you'll see that it didn't work.

What?!?!  Calm down.  It did work but your computer saves information so it doesn't have to reload everything every time.  Go HERE and download CCleaner.  It will clean your computer of all that crap.  Then go back to your blog.

It worked!


Your favicon will now show up on your blog and also in blogrolls on other peoples blog.  

So that's it!  Super easy and tons of fun!  Good luck!