Tutorial: Customizing a favicon in Blogger

June 11, 2011

Tutorial: Customizing a favicon in Blogger

June 11, 2011
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 16×16 pixels or 32×32 pixels). I made a teeny heart, to go with my blog design…it’s 32×32.

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!

48 Comments

  • Anonymous June 11, 2011 at 5:02 pm

    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

  • Kristen June 11, 2011 at 5:06 pm

    Hey Beth, thanks! I can't wait to see it! I'm still waiting for mine to show up 🙂

  • oh' boy June 11, 2011 at 5:51 pm

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

  • Anonymous June 11, 2011 at 6:32 pm

    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

  • Kristen June 11, 2011 at 6:33 pm
  • Anonymous June 11, 2011 at 6:57 pm

    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

  • Ms.M June 11, 2011 at 7:49 pm

    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

  • The Lesson Plan Diva- A 1st grade blog June 11, 2011 at 8:12 pm

    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!!!!

  • Liam June 11, 2011 at 8:50 pm

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

    http://www.twistofliam.blogspot.com

  • Amy Lynch June 11, 2011 at 9:03 pm

    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!

  • Jo June 11, 2011 at 9:06 pm

    Thank you so much for this post!!! =)

  • Mrs. Bee June 11, 2011 at 11:12 pm

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

    Mrs. Bee

  • liam June 11, 2011 at 11:53 pm

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

  • Teacher Mum June 12, 2011 at 5:15 am

    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.

  • liam June 12, 2011 at 7:38 am

    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…

  • Susan June 12, 2011 at 2:22 pm

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

  • Runde's Room June 12, 2011 at 2:55 pm

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

  • Kristen June 12, 2011 at 2:58 pm

    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?

  • Just4Teachers June 12, 2011 at 3:06 pm

    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/

  • Hadar June 12, 2011 at 4:05 pm

    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

  • Kristen June 12, 2011 at 4:37 pm

    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.

  • Kristen June 12, 2011 at 4:45 pm

    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!!! 🙂

  • Angelia June 12, 2011 at 6:51 pm

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

    Angelia
    http://extraspecialteaching.blogspot.com

  • Mrs. Lochridge June 12, 2011 at 11:29 pm

    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

  • Vintage Teacher June 12, 2011 at 11:51 pm

    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/

  • Rebecca Rojas June 13, 2011 at 2:28 am

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

  • Mrs. Coe June 13, 2011 at 4:12 am

    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

  • Sylvia Duckworth June 13, 2011 at 3:28 pm

    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

  • Sylvia Duckworth June 13, 2011 at 3:34 pm

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

    Syl

  • Sylvia Duckworth June 13, 2011 at 3:51 pm

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

  • Chrissy June 13, 2011 at 11:43 pm

    You rock!!!

    ReadWriteSing

  • Kristin Young June 14, 2011 at 12:09 am

    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

  • Jill June 14, 2011 at 1:12 am

    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!

  • Dual Kinder Teacher June 15, 2011 at 1:46 pm

    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!

  • Dana June 15, 2011 at 3:58 pm

    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

  • Jennifer June 15, 2011 at 5:06 pm

    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

  • Jodi June 15, 2011 at 9:23 pm

    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?

  • Kristen June 15, 2011 at 9:58 pm

    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)?

  • Deedee Wills June 18, 2011 at 2:39 pm

    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

  • Kathy June 30, 2011 at 6:06 am

    THANKS Again for sharing!! You make things so easy!

    Kathy
    First Grade a la Carte

  • Kristen June 30, 2011 at 1:33 pm

    thanks Deedee and Kathy! I'm glad you could use this 🙂

  • Adriana Wilsey July 14, 2011 at 3:11 pm

    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!!!

  • Raina October 23, 2011 at 5:51 pm

    Thank you so much! Such easy to follow instructions!

  • Mary January 22, 2012 at 2:38 am

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

  • Chykarea June 22, 2012 at 10:12 am

    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 http://www.chykarea.blogspot.com btw, I am a new learner, just started to blog. Love your content anyway

  • Heidi Johnson August 28, 2012 at 1:57 am

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

  • Jakboy December 7, 2012 at 11:48 pm

    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

  • Alex Smith March 16, 2013 at 8:36 am

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

  • Leave a Reply

    Instagram

    Instagram has returned invalid data.

    Follow @ladybugsteacherfiles

    ×