3.11.11



Blog Tip: How to Create a Favicon


If you own a blog, or you're a reader of a blog, you've all seen this icon:

This Blogger icon appears in your browser address bar beside the blog URL as well as beside a blog's name in blogroll lists... Unless you have your own fancy shmancy favicon to replace it!

Look up in your address bar right now. See my little plush deer beside my blog URL?  That wasn't magically placed there!  It's super easy to add your own favicon to your own blog in a few simple steps.  Adding a custom icon beside your blog is a great way to add a little bit of personalization to your page, and helps you stand out in a list of blogrolls.  Some of you already know how to do this, but for those that don't, I'm going to show you how!

First, you'll need a favicon of your own. You can use an existing photo you took, find a pre-existing one online, or draw your own.

Go to Favicon.cc to make the magic happen! Along the side, you will see that you can "Create New Favicon" or "Import Image".  If you want to create a new favicon, this nifty little website lets you draw out your own in pixel form. If you're not that creative, you can upload an existing icon or photo instead.

If you're using a photo, you'll want it to show a specific object on a plain background. We can't get TOO fancy with our little favicons, because they are only 16x16 pixels in size.  So just keep in mind that whatever you create or upload will be shrunken a ton.  Simple shapes like a heart, a leaf, or a letter work pretty well.

Here is what my deer plush looks like once uploaded to the favicon.cc generator:

It may look funny here, but if you check out your browser's address bar after uploading, it will show you a preview of exactly what it will look like as your icon!

Then when you're happy with how it looks, all you need to do is hit the Download Favicon button below the generator and save it to your computer.  It will save as a .ico file.


To add this favicon to your Blogger blog, they made it pretty easy for you. In your Blogger admin, just go to Design then right under the line "Add and Arrange Page Elements" there is an option to change your favicon. Simply upload it and you're done! (In the new Blogger layout, just click the drop down arrow in the menu beside your blog, then choose Layout. There is a favicon edit link right on the next page!)

Happy faviconing!

P.S. Some of you are having problems saying it's not showing up. It's nothing you've done wrong, it's just because your computer has cached the old blogger icon, so it might take 24-48 hours or so to update for you... depending on when you most recently visited your blog. Try viewing it from a different browser or try clearing your internet cache to see it immediately!

p.p.s. I can't reply to some of your questions via email because you have not set up your email address in your blogger account. View THIS POST to learn how to allow replies to your email address. PLEASE DO THIS! I can't stress it enough :)

p.p.p.s. IF ANY BLOG OWNERS HAVE ANY SPECIFIC QUESTIONS/HELP TOPICS YOU WANT ME TO COVER, PLEASE LEAVE A COMMENT AND LET ME KNOW WHAT YOU'D LIKE TO SEE AS A FUTURE POST! 

linking up with: tatertots & jello

30 comments:

  1. Yay thanks for posting this. I was actually just about to start researching how to make a favicon :)

    ReplyDelete
  2. Ooh! Thanks! I don't really like the one I have now, and I had a really hard time making it. This makes my life so much easier!

    ReplyDelete
  3. Oh my god! Love this! THANK YOU SO MUCH!!!

    ReplyDelete
  4. i "liked" all of these fabulous vendors! what an amazing giveaway!

    ReplyDelete
  5. I just did all the steps and it won't show. Its showing saved in my layout but when I bring up my blog it still shows the blogger B next to my name. :( I don't know why it won't show for me.
    Emily w/Amazing Grapes

    ReplyDelete
  6. I am having the same issue as Emily? I have it all saved and it shows on my edit layout, but not when I go view my blog??

    Thank you so much for the tip though...I have never known how to do this :-))

    ReplyDelete
  7. adore! i just made one! hopefully it will start working soon!
    xo TJ

    ReplyDelete
  8. Thanks:)
    windytreeowls.blogspot.com

    ReplyDelete
  9. I made my icon a Pug with a hoodie sweatshirt on. haha!

    ReplyDelete
  10. Hello, first of all, I REALLY appreciate this post, I've always wanted to learn how to do this!

    Secondly, I'd love if you could explain in a future post how to make one of those "About" sections with the picture and the picture buttons underneath that lead to your other networks. I apologize for not knowing the term, I'm still pretty new to all of the decorative aspects of blogging.

    Thanks! :)

    http;//sugarhistudio.blogspot.com/

    ReplyDelete
  11. Thank You so much for sharing how you made your favicon. That little dear is so cute! I can't wait to try making something of my own.

    ReplyDelete
  12. Thanks for this! I'd been wondering how to do it so reading this was great timing :) Really helpful.

    ReplyDelete
  13. Awesome thanks so much. I love your helpful bloggy posts. This may seem like a dumb thing to cover but I am completely lost on the RSS thing. I have no idea what it is... if I'm doing it... or why I should be.

    ReplyDelete
  14. thanks! I always wondered how to do this, I would never have guessed it was so easy!

    ReplyDelete
  15. Sorry to be a pain...I seem to be having a little trouble... I followed all the steps but it won't show. Its there and showing in my layout but when I bring up my blog it still shows the blogger 'B' next to my blogs URL. I see the same is happening for others... any idea how to solve this?

    ReplyDelete
  16. I have a problemo. I did all the steps and made one that i really liked. When I try uploading it though blogger says its "not a square image." I tried different pictures and sizes and everything. I dont know if you know anything about this, im just confused. hopefully you can help!!

    -kelly-

    ReplyDelete
  17. i'd also love a tutorial about the about me section and the social network button links. this is awesome thanks so much for all the great tips! Blessings!

    ReplyDelete
  18. i'm also totally loving all your tips. so happy to have this blessings to you! ...also i'd like the tips on the about me section and the social networking buttons/links too!

    ReplyDelete
  19. Hi I would really like to know how to erase the space on my sidebar between gadgets and images. Every article I found said to find .side.widget or something like that and I cant find it!

    I would love to know!

    Thanks!
    Jillian

    ReplyDelete
  20. Thank you so much! This was a great tutorial. I have an Idea for a blog post.... I recently was wondering how to add your own pictures to Page buttons (Home DIY, Fashion,Photography etc.). I can`t seem to do this but I have seen some really cool ones on these websites... http://www.tenpennysplendid.com/
    http://myevaforeva.blogspot.com/
    http://yellowbirdyellowbeard.blogspot.com/

    ReplyDelete
  21. Thank you very much! This post is very useful.

    ReplyDelete
  22. I wanted to do this but didn'T know how it was called so it was hard to google it. Thank you!

    ReplyDelete
  23. Very helpful post. Your blog has got a very good design! I implement your Favicon tips on mine: witheredpapyrus.blogspot.com

    ReplyDelete
  24. This is so helpful - thank you! I've been having a bit of trouble with things not being in the centre - what's the correct html code to get your header in the centre, instead of the current default being on the left?

    ReplyDelete
  25. I love this post. Very helpful. :) Just wondering if you could tell me how to put a favicon onto a Wordpress.org site, thanks

    -Lucy

    ReplyDelete
  26. It worked, I'm so happy! Everyone saying it's not showing up needs to look on another browser or wait a few days like it says on the post

    creamteaandrosejam.blogspot.co.uk

    ReplyDelete

 photo prev_02.jpg  photo next.jpg  photo home.jpg
Back to Top