Friday, June 10, 2011

Adding A Favicon


I wasn't planning on writing this post today, but I needed to update my favicon.  Plus, it's fast and easy.  You can't beat "fast and easy!"  What is a favicon?  It's the small 16x16 pixel identifier that tabs your web page.  In the above photo I've pointed out my new(!) favicon and, of course, the all-familiar Google one.

This is what I did:  Remember, I am not a programmer and have about as much html foreknowledge (maybe less) than you do!  There are probably lots of other ways to do this, but this is what works for me.  So, I'm not going to argue with success.

Just so you know, if you're ambitious you can make your own custom favicon--I'll leave that subject for another day, maybe.  Assuming you want things simple, it's "okay" if I assume that, right(?) we'll do it this way.  First, find a favicon you like and goes with your blog.  You can see in the Google tab above, I first searched for flower favicons.  To save you the search process, I'm going to suggest going to favicon.cc and start your search there.  You don't even have to register, just start looking at their Tag Cloud, or use their Search Box.

I started by looking at flowers, but soon switched to houses.  After you find the one you'd like to add, click on that to get its full page.  That page will include the coding.  My favicon is called "yellow house," catchy, I know.   At the bottom of the screen you will find coding to add to your Blogger html.

Go to your Blogger page, then go to Design, then Edit HTML.  If you're squeamish you can download your full template now, in case of an HTML emergency.  If you're like me, you can add the coding, hit preview, if that looks bad, don't save any of your changes.  Use your "find" option (the Macs is Cmd F) and locate </head>.  Right before that (this code can go anywhere between <head> and </head>, but I like to keep things simple)  Copy and Paste the code.  Preview your work.  If you see your little favicon, Save and Go.  Easy.  Peasy. 

Note:  This method works in all browsers except Internet Explorer.



I'm sharing:
504 Main
at

9 comments:

  1. UnknownJune 10, 2011 at 9:54 AM

    nice- thanks for this easy tutorial! I'm pinning this idea to share with others!

    ReplyDelete
  2. UnknownJune 10, 2011 at 11:06 AM

    Thanks, Kim. I created my own favicon awhile ago and was going to do a tutorial on it, but I pushed it to the back burner. I didn't really care for the one I made, so this helped me find a cute green butterfly that I like. Thanks for the great tutorial!

    ReplyDelete
  3. SuzJune 10, 2011 at 1:20 PM

    I'd want my own favicon that I designed but I'm way to non computer savvy to figure out how to do this or even do my own. But thanks I'll save it.

    ReplyDelete
  4. Korrie@RedHenHomeJune 10, 2011 at 5:46 PM

    That is so very cool! I couldn't find any red chickens that I liked, but I have a little red house how! THANK YOU!

    ReplyDelete
  5. UnknownJune 10, 2011 at 9:09 PM

    Had not heard of this. When it comes to editing my HTML code, I'm pretty much a big chicken! I'm always afraid I'll mess something up big time!

    ReplyDelete
  6. Sarah, Three BoysJune 12, 2011 at 9:18 PM

    Thanks for the great reminder! I have been meaning to do this, and keep forgetting!

    ReplyDelete
  7. Sonya@Beyond the Screen DoorJune 13, 2011 at 12:45 AM

    Hey! Less than a week to go! I'm thinking of and praying for you!

    ReplyDelete
  8. Anita @ GoingALittleCoastalJune 14, 2011 at 2:41 AM

    Thanks Kim! Took me a few tried but I don't think I had the whole code copied. Three more days!

    ReplyDelete
  9. CrafterellaJune 15, 2011 at 6:08 PM

    Thanks so much, easy and quick and I did a little editing and made my own, yay!

    ReplyDelete

Thank you for taking the time to comment. I do my best to pay a return visit. ~Kim