Everything Favicon

Favicons. Want to know what these are, why I care if you have one, and how to make one for yourself? Then read on. Actually, read on anyway.

~What They Are~

Fav-icons. The little icon that appears in the left-hand corner of your blog when it is open in a browser tab. If you haven't successfully created one for yourself, then it will be an orange square with a B--the Blogger symbol. Or possibly a blue W for WordPress. Either way, it is your host company's emblem, not your own. And they are totally fine with it staying the way it is, because it draws attention to them instead of you. Now, that's not what you want, is it? ;)

~Why You Should Have One~

Personally, I find having a Favicon adds a lot to your blog. That's basically the only reason I have, but think about it. It's one of those little "finishing touches" that there is no reason to delay on. It's something that can distinguish you and your blog. Especially when viewing blogs on a drop-down list of someone's blogger reading list, your title is going to stick out among the masses that much more if it has a pretty, personal symbol. And sticking out among the masses is pretty hard to do, amIright? So take the step if you don't have one yet. And if you do, I applaud you.

~How to Make One~

If you already have one, you don't have to read any further, but thanks anyway :) 

It took me weeks a long time to figure out how to actually make myself a Favicon. Provided you are using Blogger, this is how it worked for me. Go to Blogger's website (make a wild guess at the URL). Choose the blog of yours that you want to add a Favicon to. Select layout on the left-hand menu and you'll see Favicon as an option at the very top of the template displayed. Pretty straightforward so far, huh? If you click edit inside the Favicon box, it will tell you the image you want to use has to be under 100KB and a square. Have no fear, all that means is a little photo editing.

I use PicMonkey for photo editing since it's free and simple. So, using PicMonkey, choose edit and select the photo you want to use (I highly recommend this being your own picture for copyright reasons). It should open it up for you in their editing software. Now, just choose resize at the bottom of your options under Basic Edits. You'll have to uncheck all the little boxes and type in the same number for both dimensions of your photo. Mine's 575/575 and came out under 100KB. If your photo looks squished when resized like this, you can either crop or take a different photo more prone to being a square (this is what I had to do). 

Once you're happy, hit save. Name it whatever and make sure it is indeed under 100KB. It'll tell you right above the green Save to my Computer button. If not, resize smaller; if so, save. Even if you're not using PicMonkey, this process should be fairly similar. But you get Old Navy adds if you use PicMonkey ;)

I made it this far, and inserting the image as it now stands did not work. I finally figured out that the image must have the extension .ico instead of the default .jpg or .png in order to work. And it's very simple to change. Go into your computer where you saved your picture and right click it. Select copy and make the copy say .ico at the end instead of what it wants to say. It should accept this without much of a fight and then, voila! The picture you're going to use.

Head back over to blogger and select choose file inside the Favicon box. Select the one with .ico at the end. Save in the Favicon box and then hit save arrangement in the upper right-hand corner. You can type your blog's URL in or hit preview. Where there was formerly the Blogger emblem, should now be the image you spent so long on. If not . . . make sure your image still shows up on Blogger and you did attach the .ico file.

I hope that worked!

~~~~~

First, check out Morgan's giveaway. It's awesome and almost over!

Second, celebrate my 2 month blogaversary it's way better than Earth Day was! You're all the reason I've made it this far :D Looking forward to more!

Now. Was this post helpful to you at all? (Sorry, I know the screenshots weren't great. Double clicking helps.) Have you already conquered the Favicon hurdle? Would you be interested in seeing other tutorial posts if I can come up with any that could save you time, or does Google suffice? Do tell all.