Saturday, July 7, 2012

How to Install a Favicon in Blogger

Are you a new blogger? Have you installed a favicon yet? Are you wondering what the heck a favicon is? Have no fear! I have all of the answers you need. 


The word favicon is short for "favorite icon". It's the little picture you see next to the name of your favorite blog or website. And, just like your blog button, a favicon is super-important for helping visitors recognize and identify your blog because it is displayed frequently in web browsers. As you can see from the photo above, the favicon image is shown on the page tab when someone views your blog, in the address bar beside your web address, and on the bookmarks toolbar (or menu) when someone adds your blog to their list of website "favorites."

Your blog's default favicon is the orange and white Blogger logo that looks like this. I think we can all agree that the Blogger logo doesn't really project the image or fun of your blog and it needs to be changed.


Designing your Favicon

Before you can install a favicon, you need to CREATE one! I made mine in Pages for Mac, but you can use Publisher or PowerPoint to create your image. As you create your image, it is important to keep in mind that the favicon must be shrunk to 16x16 pixels. That's really small! Don't include too many details because you won't be able to see them. Many bloggers have success shrinking their blog button down to 16 pixels, but this did not work well for me at all. Here is my attempt at shrinking my blog button. The image is not distinct and my colors just sort of run together. See what I mean?

So, I chose to create a simple favicon using the cream dot and pink motif from my blog. The final favicon is much easier to identify.

Once your favicon image has been created,  save the file as a jpeg or png.  Crop any unwanted edges from the image, and resize the final image to 16x16 pixels.


Installing your Favicon

Now that you have a favicon, you can easily install it using your Blogger Dashboard. I made a quick video tutorial to demonstrate the process. The installation doesn't require you to use any HTML code and you won't believe how simple it is!
 

Can't see your newly installed favicon?

You probably just need to clear your browser cache, then just reload the page. It should work for you. If you need instructions for clearing your cache, Google has all the answers! They provided easy instructions for clearing the cache of any browser.


If you are a blogger you may want to consider joining Teaching Blog Traffic School. And it's not just bloggers - sellers on Teachers Pay Teachers can also benefit a LOT from the tips and networking opportunities that Charity Preston has to offer. I have only been a member for a few months and the knowledge I have gained has had a HUGE impact on my blog's traffic and my online presence. Click the button to learn more!


Have you installed a favicon yet? What image did YOU use?

31 comments:

  1. This sounds like fun! I have another project for today! Thanks for sharing!
    Jennifer
    kindertrips

    ReplyDelete
    Replies
    1. You're so welcome! Glad to help!

      Delete
  2. Thanks so much! I had a favicon on my teaching blog but not on my quilting blog. So now I do!! Thanks!

    ReplyDelete
    Replies
    1. Yay! I'm so excited for the newest addition to your quilting blog :)

      Delete
  3. I've been meaning to do this! Thanks for sharing the tutorial on how to do this. You are wonderful! :)
    Lisa
    Learning Is Something to Treasure

    ReplyDelete
  4. I used a giraffe print since that's the unifying animal print on my blog! Loved the tutorial. Great job!

    Sarah
    Miss A's Kindergarten

    ReplyDelete
    Replies
    1. I LOVE your giraffe print favicon!

      Delete
  5. Hmmm......I think I did everything correctly. It's showing in Dashboard but not anywhere else. Do you have any idea what I could have done wrong?

    Great tutorial!

    Angelia
    Extra Special Teaching

    ReplyDelete
    Replies
    1. You did a great job Angelina! Your favicon is installed and I can see it. You may just need to clear your browser cache. I updated my post with a link in case you need instructions.

      Delete
  6. OMG! I must be technology challenged--I can't get it to work! It says that it worked on my layout but not showing anywhere else. I also couldn't decide what to use for an icon...maybe I'll just keep trying. Btw, Sarah I love yours!
    Barb
    Meet me at the zoo…
    kinderzoo

    ReplyDelete
  7. Thanks girl! Just tried it :) Waiting for it to kick in!
    ❤Teri
    A Cupcake for the Teacher

    ReplyDelete
    Replies
    1. Teri, I stopped by your blog and it worked! Yay!

      Delete
  8. If it doesn't appear to work right away, it doesn't mean you did anything wrong. First off, make sure you click "Save Arrangement". Then it probably is installed but your computer isn't recognizing it yet. You probably just needed to clear your browser cache. I use Firefox and although I'm not at my computer right now, I think I recall the steps accurately. To clear the cache, select "Tools" from the top menu and click "Clear Recent History" a box will pop up. Check the box beside "cache" and choose "ok." After it clears, refresh your blog page. You should see your new favicon!

    ReplyDelete
  9. Thank you! This was great! I was also able to use this website to create it. http://www.favicon.cc/

    ReplyDelete
    Replies
    1. What a fun web tool! Thanks for sharing!

      Delete
  10. Love it! Passing on a Versatile Blogger Award! Stop by my blog and check it out!

    Wib On!

    ReplyDelete
  11. It worked! It actually worked-took a whole day to finally see it-but it worked! Thank you! Ah, the simple things!
    Jennifer
    kindertrips

    ReplyDelete
  12. Instead of creating my own, I just searched free favicons and picked a cute little daisy. Then installed that :-)

    ReplyDelete
    Replies
    1. Genius! Great way to save yourself a little work :)

      Delete
  13. Thanks so much for sharing! I've been meaning to figure out how to do this!!

    Abby
    msalleysclass.blogspot.com

    ReplyDelete
  14. THANK YOU!!!!!!!!!!!!!!!!!! Thank you a gazillion and a half! This is something that I've 'wished' for a long time. You made it to simple to follow! I'm another tech-challenged and it worked. I will tell you that it took Blogger nearly an entire week for it to upload. I was patient and it's popped up today. Every time I've gone to edit today's article I think of you and smile. You'll be getting a whole lot of smiles over the coming week-month-year!

    Debbie

    ReplyDelete
    Replies
    1. Now I just have to figure out what happened to my pic in these replies that publish as my blog. Any inspirational insight? LOL. (I could keep you busy all day attempting to hold my tech-challenged little hand.)
      <3

      Delete
  15. Mine worked too!! Thanks for all the great videos. I love your blog!
    Heather
    Kickin' it in Kinder

    ReplyDelete
    Replies
    1. Thanks for stopping by! I'm glad it worked for you!

      Delete
  16. AWESOME Maria!! LOVE the tutorial!!

    ReplyDelete

  17. Want to prepare a unique logo for your websites,(10370)
    we are here for your services, we gives the unique & best logo design with cheapest rates..
    For more details visit: http://eazy2earn.com

    ReplyDelete
  18. This is great!! Thank you soooo much. This was super easy EXCEPT I couldn't figure out why I couldn't type 16 x16 when I was sizing it. Every time I would put 16 in height the width would change to something else....ugh!! I couldn't get them both to show 16. Well...........there is a little lock next to the sizing and if you unlock it then you can type in your size without it defaulting to something crazy. It took me about 30 minutes to figure that out. I'm sure anyone else would have figured that out right away. Anyway, if I wouldn't have overlooked that for so long I could have done this in 5 minutes with your great instructions. Thanks so much for your super EASY and HELPFUL instructions.

    Shannon
    Sweet n Sassy in 2nd

    ReplyDelete
  19. Thank you so much for the explanation I am a new blogger and I had no idea what a FAVICON is. God Bless YOU!

    ReplyDelete