June 11, 2011

Tutorial: Customizing a favicon in Blogger

Favi-what?! Just in case you didn't know (I didn't until I had to search for its name last year!) a favicon is that little image that shows up next to your URL, on Internet page tabs, AND (this next one is fantastic for Bloggers) in the Blogroll itself.

Like this little heart I'm going to use for my blog...

It's pretty easy to add one to your blog, thanks to Blogger's new interface. Have you seen it yet, by the way??
Sidenote: I only found out about this accidentally. I had been having a lot of blogging issues lately. My lastest posts kept automatically translating themselves into Hindi and, as much as I love other languages (being an ELL teacher), I had to find a solution. That's when I stumbled along Blogger in Draft. I guess Blogger is rolling this out slowly, but you can follow the blue link to try it out yourself if your blog hasn't been changed over yet. It has some really nice features...

Which brings us back to the favicon. With this new interface, Blogger makes it really easy to customize your own little image. Here are the steps...
1. Go to Blogger in Draft (if you haven't already).
2. Go to your new Dashboard.
3. Go to the Layout tab.

4. Here you will see the Favicon option. Before you upload your new icon, you will need to prepare it, as Blogger can only upload .ico files for a favicon. What does this mean? You can make your little image and save it as a .jpg or .png, but you must convert it, so...

5. Head to a Favicon generator, such as Web Script Lab.

6. The favicon you design must be small (either 16x16 pixels or 32x32 pixels). I made a teeny heart, to go with my blog design...it's 32x32.
7. Upload your file and click the Generate button. Then you can right-click to "Save as".

8. Head back to your new Blogger interface and upload your new favicon file!
Important!! Your new favicon will take some time to show up. I made mine before going to bed the other night and thought it didn't work and I had done something wrong. But it was there the next day! Even now, you might not see my new favicon, at least for a few more hours.
But, once it shows up, here's where you will see your favicon...
With the URL of your blog

On the tab with your blog
On the Blogroll of your friends' blogs

More important information...
It's best to keep your favicon simple, since it's such a small image and you really want it to pop.

And, if you're really stuck on how to design it, there is a really neat site to generate one, pixel by pixel...check it out at Favicon.cc.

So, I'm still waiting for my little blue heart to show up. But it's still cool, right?

Will you make a favicon too? I can't wait to see them if you do!

51 comments:

  1. Yeah!!!! I think I added a favicon- a picture of a flower I took. Thank you so much for teaching me something new!

    Primary Connections

    ReplyDelete
  2. Hey Beth, thanks! I can't wait to see it! I'm still waiting for mine to show up :)

    ReplyDelete
  3. i just added a carnival star to go with my new design... thanks for the TUT!!!

    ReplyDelete
  4. I have a question for you but it is not related to this post- how do you # the comments? Thanks for any help!

    Primary Connections

    ReplyDelete
  5. Hi Beth, no problem...it's right here: http://ladybugsteacherfiles.blogspot.com/2011/04/video-tutorial-numbering-comments.html
    :)

    ReplyDelete
  6. Again Thank you Thank you!! I was able to add #'s to my comments. I also had a blogger asking questions about favicon so I am directing her to you!

    YOU ROCK :-)
    Primary Connections

    ReplyDelete
  7. I've been trying to do this for sometime now but always failed at it. Thanks for sharing. Your tutorials are wonderful.

    Ms. M
    Ms.M's Blog
    A Teacher's Plan

    ReplyDelete
  8. I did it! I added the favicon and the numbers, but mine are not in a straight line like yours..I am not sure what I did wrong. Thanks!!!!

    ReplyDelete
  9. This is awesome! My little blog is growing up so fast! *tear* Thanks for the tips, Kristen. Now the waiting begins...

    www.twistofliam.blogspot.com

    ReplyDelete
  10. I did this as well, although it's the only polished part of my blog since I only started it today! Thanks for the tip!

    ReplyDelete
  11. Thank you so much for this post!!! =)

    ReplyDelete
  12. I've been failing at doing this, too! SO happy! Thanks for finding the new blogger dash!! it's great!

    Mrs. Bee

    ReplyDelete
  13. It worked! Hurray! Come check it out (and post a comment while you're at it)!
    Liam
    www.twistofliam.blogspot.com

    ReplyDelete
  14. I'm glad I found you and am now a keen follower. I was interested to read your posts about sticky notes as I, too, am an addict. I didn't know you could print on them.

    ReplyDelete
  15. Hey Kristen, I see it! You have a BLUE HEART! Way to go! If you don't see it, I bet its a Mac thing...My girlfriend has a Mac and can't see my lime...

    ReplyDelete
  16. Kristen, I am not seeing the new layout for my blog. I followed your steps...Any hints?

    ReplyDelete
  17. LOVE IT! Thank-you so much! You have such wonderful ideas!

    ReplyDelete
  18. Thanks for the kind words guys!

    Susan, I just followed this link to get to the new layout: http://draft.blogger.com/home

    Or did you mean the layout tab itself?

    ReplyDelete
  19. Kristen,
    Left you a message on my blog about my classroom. As for this, thanks as always for teaching us something new. I checked the box that said make draft.blogger default...but it is not working. I am going to wait awhile and try again. I love the new look that you posted, so I am hoping I can get mine to work. Hang in there! 2 more weeks, right? When do you go back and are you staying in the same grade level.
    Debi
    http://just4teachers.blogspot.com/

    ReplyDelete
  20. Your blue heart is up!!! so cute! p.s. now I can't right-click anything on your blog! Did you do that on purpose??!

    Hadar

    ReplyDelete
  21. Hey Hadar! Noooo...I have no idea why it's doing that, I only do that for the Thistlegirl Graphics!! I'm off to check out the problem.

    ReplyDelete
  22. I think I fixed, hopefully I didn't mess anything up. I've been having a lot of problems lately with my blog :/

    Debi, I'm sending you a message soon--off to finish report cards!!! :)

    ReplyDelete
  23. I can get to the new Blogger dashboard but don't see the Layout tab anywhere. Help!

    Angelia
    http://extraspecialteaching.blogspot.com

    ReplyDelete
  24. Thank you for sharing!! I have played with the html code and tried to use a hosting site with URL to post my favicon. That was futile and frustrating!!! My Blogger dashboard hasn't changed over yet, but I was able to edit the favicon using your link. You continue to amaze and share. LOVE it.

    First Grade Factory

    ReplyDelete
  25. Your heart if showing up! Thank you so much for sharing all this knowledge so that I, the technology chalenged, can understand it.

    Pam
    http://vintageteacher.blogspot.com/

    ReplyDelete
  26. Thanks! This is awesome! BTW, how do you get the numbers to come up next to your comments?

    ReplyDelete
  27. Well.... Blogger in draft just hates me! I can't get it! I am about to fake cry and see if that will help!

    littlemisskindergarten.blogspot.com

    ReplyDelete
  28. Wonderful tip, I can see your heart now! I just made my Favicon and can see it in FireFox and Chrome but not Safari yet. Thanks so much, Kristen, your blog is the best!
    Sylvia
    http://mmeduckworth.blogspot.com

    ReplyDelete
  29. HI again Kristen, I wanted to repost my comment so that you can see the Favicon I made (I have 2 different blogs).

    Syl

    ReplyDelete
  30. Weird, the favicon didn't show up on my comment, oh well, maybe it will eventually!

    ReplyDelete
  31. Let's see if mine is working. I couldn't get Blogger in Draft to load no matter how many different ways I tried it. Supposedly I changed it in the Design link of the OLD blogger...but....test test test!

    Little Miss Glamour Goes to Kindergarten

    ReplyDelete
  32. Your heart is SUPER cute!! I will have to think of a favicon that goes with my Blogger-designed layout... I will +1 this so I remember to come back!!

    Magnificent Multiagers!

    ReplyDelete
  33. Love your tutorials, I love it even more when I'm successful with them :) I didn't think mine was working either, but I'm hoping it is, I do see your cute hear though :) Thanks again!

    ReplyDelete
  34. Thanks for showing us this! I had no idea this was an option. Can't wait for my favicon to show up! :)

    Dana
    3rd Grade Gridiron

    ReplyDelete
  35. My http://draft.blogger.com/home looks the same as my old one did, just a different blue background at the top? I am going to play around and see if I can change it in design?

    Mrs. Hall's Fab Firsts

    ReplyDelete
  36. I thought I had this all figured out, but when I generate my favicon at webscript lab and right click on it, Save As is not an option. Now if I click download, another screen with my favicon comes up. I can right click and "Save picture as" but when I go to put it in blogger, it says "not a valid file type." Any ideas?

    ReplyDelete
  37. Hey Dual Kinder, I can see your favicon, it's beautiful!

    Jennifer, I'm not sure why it's like that...the only thing I can guess is that they're still rolling out the new features for everyone so it's just weird right now. Good luck!

    Jodi, what kind of picture did you upload (a jpg or png)?

    ReplyDelete
  38. Hi Kristen,

    Seriously! How would I live without your tutorials. I loaded mine... read the fine print... and I will wait for my favicon to appear. I am excited. THANK YOU for your pearls of wisdom!

    Mrs. Wills Kindergarten

    ReplyDelete
  39. THANKS Again for sharing!! You make things so easy!

    Kathy
    First Grade a la Carte

    ReplyDelete
  40. thanks Deedee and Kathy! I'm glad you could use this :)

    ReplyDelete
  41. I just found your blog! Thanks so much for all the tips! I am going through each one and it is helping to understanding blogs!!!

    ReplyDelete
  42. Thank you so much! Such easy to follow instructions!

    ReplyDelete
  43. SO excited to learn this!!! THANKS! PS- I would LOVE to get my blog added to your roll!

    ReplyDelete
  44. I think I did it but not quite sure I did it right. What you mean it will appear to my friend blog roll? But I didn't see the change :-( my blog is www.chykarea.blogspot.com btw, I am a new learner, just started to blog. Love your content anyway

    ReplyDelete
  45. Thanks for this post. Very informative. Can this be used with other programs besides blogger. I have an SBI site.

    ReplyDelete
  46. Thanks for posting this up. I knew about being able to change the Favicon but the generator is going to be very useful. Good on you and great blog! ^_^

    -Hugh

    Change Lives Together

    ReplyDelete
  47. I was able to edit the favicon using your link. You continue to amaze and share. LOVE it.
    Golden Valley High School Senior Portraits

    ReplyDelete
  48. Thank you for sharing how to do this!

    ReplyDelete
  49. Well i already have the information about the changing of faveicone otherwise your shared information is also great.thanks
    garden design brisbane

    ReplyDelete

 
Blogging tips