How I Created My Custom Favicon

Like I mentioned in the previous post, I am going to start sharing all of my updates and changes that I do to the blog here at ABC's of Life.  I feel like I spend half of my time as a new blogger just researching how to better my blog and make it what I know it can be.  So today, I want to share how I created my custom favicon.

To begin, you may be wondering what is a "favicon"?  Well, that my friends, is that little icon you see next to your website's name on the browser tab.  For example, on Blogger it's that orange square with the white "B" and for Pinterest it's the red circle with the white "P".  For the ABC's of Life (as of today until I decide to change it again), it is a transparent background with a grey "A".

Now, you might be wondering why you'd want to change that little icon.  It's really one simple reason...so your blog stands out!  I am on Blogger (obviously because the end of my website still says abcberry.blogspot.com), so originally I just had the orange square with white B like EVERY OTHER Blogger based blogger...make sense?  When you change that icon, it's just one more way for your readers to remember your page.

NOW, you want to know how to change it right??  This is a 2 part-er so pay close attention!

FIRST, you need to create your custom favicon in a photo editing site like PicMonkey.  {If you don't know what PicMonkey is, here's the jist.  It's an AMAZING FREE online photo editing site where you can edit your own photos, design new images (like your custom favicon or that cute little image above), and create collages!}

Here's the steps to do this in PicMonkey:

1. Click "Design".
2. Under "Canvas Color", click the box for "transparent" for no background color OR choose a background color.
3. Under "Resize", resize the image to 100x100.  (In my opinion it's easier to do this first.)
4. IF you choose to do text (like a letter or initials), click the "t" for Text and select your font.  If no text, skip to step 6.
1. Note: your font will show up tiny at this point.
5. Type what you want (i.e. "A" in my case) and then drag the text box to make the text fit inside the 100x100 square.  
1. Note: Remember you want to fill up that square space.
6. If you want an image, click on the butterfly to bring up icons.  Choose one provided on the site or upload your own by clicking "Your Own" at the top of the list.  
1. Note: Again, you want to drag the image out to fill up the square space.
7. Save your favicon image by clicking Save at the top.
8. Change "Untitled" to something you remember and then make sure it's selected as PNG.  
9. Save in a location on your computer or hard drive where you will easily be able to find it.
1. Tip: I save all of my blog design stuff to a file called "TEMPLATE" so I can easily locate it all.
10. Time to upload to blogger!

SECOND, go HERE to learn how to upload that custom favicon to Blogger!  Angela at A Typical English Home shows you just how simple it is to do this!

PLEASE TAKE NOTE!  My favicon did not automatically change for me (even with multiple screen refreshes) so I got really frustrated, but I did notice it had changed a few days later so don't get bogged down if you don't see an immediate change on your computer.





Disclaimer: This post may contain affiliate links, meaning if you purchase an item or sign up for a service through a link in this post I may receive a commission. This in no way raises the prices for you nor does it compromise your personal information. In fact, being an affiliate for such programs often gives me the opportunity to offer my readers fabulous discounts or offers not available to the public. Any compensation received will in no way effect my opinions and all products or services that I recommend are of my honest opinions and I feel that you could benefit from such products or services. Thank you in advance if you do decide to participate in any offers you find here because your support is a big help to me in being able to maintain our blog and in return share with you future offers and giveaways.