Pages

Tuesday, July 26, 2011

Make your own Favicon. A tutorial of sorts.

Yesterday I was with my sister and I was talking to her about how I finally changed my favicon. I know, riveting stuff. She mentioned it might be nice to do a tutorial on how simple it is to change yours. Some of you may know what a favicon is, and some of you? May have absolutely zero idea. It's basically that teeny picture that shows up next to your URL. But, if your blog is using blogger, it probably has the default orange & white blogger "B" unless you've changed it.

So, we all like to add some more personalization to our spaces, yea? So here's a little how-to on making your own favicon.

{Just to match my current blog theme, I went with a lollipop picture.}

So, let's use picnik.com as a starting ground, shall we? It's a free service (or you can pay to upgrade, which I do) that I'm sure most of you know about by now.

It depends what image you want to use as your favicon, whether it be a photo you took, or maybe an image you found elsewhere, or something you created on your own. Either way, upload it to picnik.


Unless your image is already a perfect square, you'll have to go under the edit tab, then to "crop" to make your image a square.  You can see I have mine at 989 x 989 (it's a BIG image). It's fine for now, as long as it's a square.  I decided to just zero in on the lollipop part, but you can do whatever you want for your image.


Now, it's a square. {gasp. shock. the crowds go wild.}


Go ahead and click on the Save & Share tab. This is where you are going to save your image as little file, so make the width & height 100x100. Then save your photo to someplace you'll remember.


Now, here's the part where you have to put the image into the right place.

Log into your blogger account, and click on "design". You should end up in the back end of your blog like the photo below.  Click on the little favicon 'edit' box, upload your image, and voila. Favicon is done.


It's that easy. So? Here's the thing. Mine took about half a day or so to show up and start working. My husband tells me that Internet Explorer (for those of you who still use that?) doesn't convert & show favicons the way all the other browsers (safari, firefox, chrome, etc) do. So, if you still use IE? I can't help you. But for the rest of you, this should work :)

Now, go make your own Favicon.

***

Happy Tuesday!

29 comments:

  1. What a cute post Katie! I will have to try this!

    ReplyDelete
  2. I love it! I wonder if it can be done on wordpress?! I have some work to do! Thanks for the tutorial!

    ReplyDelete
  3. Thanks for sharing. I have now updated mine =)

    ReplyDelete
  4. Thanks for the tutorial! I'll have to give this a try.

    ReplyDelete
  5. LOVE the new banner katie!! So adorable!

    ReplyDelete
  6. Thanks for this post! Have you downloaded IE 9? It's very similar to Chrome. It might be worth it!

    ReplyDelete
  7. awesome post!! going to do this today!! :) thanks!

    ReplyDelete
  8. aaahhh... thanks! I played around with mine a while back and never really set my mind to getting it done. I think I got frustrated. Thanks!

    ReplyDelete
  9. That was the easiest thing!! I wanted to change mine for a while!

    ReplyDelete
  10. I tried to do this, but it didn't show up in Safari so I thought I messed up. And I can't see yours :( Apparently I am favicon-impaired.

    ReplyDelete
  11. am I missing something? I can't see yours! I'm using Chrome and it's still the little earth-thing. Super cute though.. I've always wanted to change mine ever since Blogger offered the option of doing so.. but of course, as is with most of the things on my to-do list.. i just haven't gotten around to it. Love the new header! Too cute!

    ReplyDelete
  12. love this!!! now just got to figure out which pic to use!!!

    ReplyDelete
  13. There are also super easy websites that do this for you :-) They also save it in the correct format if your blog doesn't accept .jpg. Like self hosted WP needs the .ico format - http://www.favicon.cc/ :-)

    ReplyDelete
  14. THANK YOU. I've been wanting to do this for awhile, but I keep forgetting about it. Now I've got a tutorial and everything! lol. Yay!

    ReplyDelete
  15. I use chrome.. and yours only shows up while the page is loading and then goes back to the earth.. do they all do that?

    ReplyDelete
  16. So helpful! Now to figure it out for wordpress!

    ReplyDelete
  17. This might have made you my hero for the day. Many thanks!!

    ReplyDelete
  18. Thank you so much for posting this! I have always wondered how different blogs get their tiny picture up there. I meant to say hello and introduce myself last week.. Your blog is one of my daily reads and I just love it!

    ReplyDelete
  19. Thanks for the tutorial! I just saw that favicon update button the other day! :)

    ReplyDelete
  20. Thank you so much for taking the time to explain this! I have been wondering about how to do it but haven't taken the time to look into it. YAY!

    ReplyDelete
  21. Wow!! Thanks for sharing. :) Success.

    ReplyDelete
  22. We're all ooooing and ahhing in unison! I can't wait to try this!! I love yours! Thanks for the how-to on this!!

    ReplyDelete
  23. Huh, how about that! I definitely didn't know what that was! ;)

    ReplyDelete
  24. Am I the only one who doesn't have a save and share button when I go to Picnik? Is that a premium-only thing??

    ReplyDelete
  25. So weird that you posted this--- just the other day I was looking at my blogger dashboard and was like- what in the world is a favicon? haha thanks katie!

    ReplyDelete
  26. :D I so know u read all ur comments, just had to mess with ya a bit! OH and I added my email to my page like u told me. I had no clue I could even do that, so thanks for the info!! I did a favicon and even changed over to mozilla b/c i gotta be with the times and didn't realize internet explorer was old news. I have soo much to learn. I will send ya an email about the ? I asked with more details.

    ReplyDelete
  27. Thanks for the tip! I've been wanting to do this but the other tutorials I've seen have looked SO much more complicated. Love your new blog design too...super cute!!

    ReplyDelete
  28. YAh! thanks for the info. so easy! THANKS

    ReplyDelete
  29. Thank you for sharing your wisdom with the world my friend. I have made a (lame) favicon and I feel all smartsy now. :)

    ReplyDelete