Weekend Warriors: Customizing Your Own Blog Favicon

Weekend Warriors is B...A...C...K!!! This month we are bringing you some great blogging and TpT "secrets!"

Are you wondering, what the heck is a "favicon?" Why do I need to customize it? I have had my own blog for over two years now. I JUST figured out what a favicon is and how to customize it for my blog. Now I want to share my new knowledge with all of you!

Favicon is short for "favorite icon." It is the little picture next to your favorite websites. It is important because it helps with branding. Just like your blog button, your favicon helps people recognize your site. The favicon image is shown next to your blog name on the page tab when someone views your blog. It can also be seen on the address bar and in the bookmarks toolbar.

The default setting for Blogger is this generic symbol:

Now it's time to learn how to customize and install your own favicon. Let the branding begin....
The first step is CREATING your favicon. I created mine in PowerPoint. But you can use Pages if you use a Mac. Your favicon is going to be SMALL. You need to keep this in mind as you create your image. In order to install the favicon, it needs to be 16x16 pixels! Don't include too many details in your design because you won't be able to see them.  Many bloggers use their blog button as their favicon. I tried using my blog button, but I felt it looked like a blur and didn't do the job of branding my blog very well.
Here is what it looks like:
Hard to tell what is there, right?
I decided to use my blog colors and the dots at the top of my blog button to create my own favicon.
More distinctive and recognizable.
Once you have created your favicon. Save it as a JPEG or PNG file. Then, make sure to resize it to 16x16 pixels so Blogger will accept the image when you go to install it.

Now that you have your favicon created, it's time to install it. It is a very simple process. No HTML code is needed (thank goodness)! Once you are in Blogger, go to "Layout." At the TOP LEFT, you will see a rectangle labeled "favicon". Click Edit. You will either see a picture of the orange Blogger button OR a favicon that you or your blog designer already created. To change the file, click "Remove". Then, click "Choose File" and locate the favicon image you saved onto your computer. Finally, click "Save." Ta-dah!! You are all set.

If you can't see you favicon image right away, don't panic! Make sure to refresh your page. Be patient. Sometimes Blogger takes their time making updates.
Thanks for stopping by. I hope you learned something new to use on your blog page. Make sure to hop on over to some of my blogging buddies and check out their tips and tricks, as well.


  1. Super cute favicon, Jaime!!

    Lucky to Be in First

  2. I didn't know what favicon stood for! Just recently found out what one was:) Going to try making my own. Thanks for the tips.

    The Resourceful Apple

  3. Thanks for the little tutorial! Very helpful.

    Luv My Kinders

  4. Thanks for the tutorial. I have mine installed and ready to go. Every little thing we can do for branding is a big plus.

    Dare to be Different-Teach!

  5. I'd been wondering how to do this, so thanks for teaching me! It was super easy, and now my blog looks even better :) Thank you!

  6. Good to know! I always wondered what that was and where-ever did it show up. I'm in the process of finally getting a profession blog design (can't wait) and then I will definitely get on this.

    First Grade by the Sea

  7. very cute!!! Someone installed mine, but I'm glad I know how to do it now too :) I've been thinking about changing up my design soon!

    Dirty Hands & Lesson Plans

  8. My favorite thing about starting a new school year is that I meet all my new friends and have a fresh/clean classroom!