Saturday, April 23, 2016

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.

41 comments:

  1. Honestly, I've completely forgotten about making a Favicon. I'll have to do it!

    ReplyDelete
    Replies
    1. Haha, no worries! You should, though, when you get the time.

      Delete
  2. Very nice post! I think I am going to do this! ;) Aww thank you so much for putting my giveaway link up there! :D Congrats on two months of blogging!! Here's to many more!! Cheers!

    ReplyDelete
    Replies
    1. Yay! Go for it.

      You're welcome. I thought it was an awesome and unique giveaway. Although, I just realized I'm probably lowering my chances of winning by sending more people over :P

      Thanks!

      Delete
  3. *accepts you applause* *bows*
    (XD XD sorry couldn't resist.)

    Coolio favicons I have a very nice one if I do say so myself. Not to pat myself on the back, of course. *cough cough*

    ReplyDelete
    Replies
    1. Yes, yours is very nice! And I thought of you when I mentioned peoples who already had one ;)

      Delete
  4. This is a great post! And I would love to have you post more tutorials! :)

    ReplyDelete
  5. Thank you SO much for this post, Abi! I've always wanted to know how to do this, but I didn't even know it was possible (just goes to show how much of a newbie I am with blogs) :D. But I'm a little confused as to how to change my picture to .ico? I tried, but couldn't do it :).

    ReplyDelete
    Replies
    1. You're welcome! As for changing the pic to .ico. You're just renaming the picture and changing what comes after the period to .ico. So mine said TypewriterFavicon.jpg and I renamed it TypewriterFavicon.ico . Does that make sense? If you want to keep your orignal picture, you can copy it before doing the name change. I hope that helped!

      Delete
    2. Hmm, let me try that ... okay, I got it :). Thank you for your help!

      Delete
  6. Oh yes, please do more of these posts! =) I already know about favicons, but google isn't the most helpful for explaining other concepts. ;) Like I've wanted to learn how to make drop-down boxes for my "pages" and I never could do it correctly! =/ Good idea on posts! ;)

    ReplyDelete
    Replies
    1. Glad you liked it, even if it was a familiar topic. I'll see what I can scrounge up on drop-downs. Thanks!

      Delete
    2. For drop down I tried doing it and you can but it takes a bit of coding work. Maybe tomorrow I can find the link I tried out.

      Delete
    3. Ah, I wondered, Hannah. I might utilize that myself!

      Delete
  7. This was a great post idea! Thankfully, I've already managed to figure out favicons, but I would love to see more tutorials in the future! :)

    ReplyDelete
  8. Great tips, and i just did the tag
    https://hannahrodriguezwriter.wordpress.com/2016/04/23/infinity-dream-tag/

    ReplyDelete
  9. I was just wondering how to make one of these thingies! :) Way to go reading my mind! ;) This post was VERY helpful. *goes to make favicon*

    ReplyDelete
    Replies
    1. Yay! I'm glad it was of use to you :D

      Delete
    2. Would you mind doing me a favor and telling me if my favicon works? It appears to be there...but only in my layout, not up where it SHOULD be.
      Me and electronics do not go well together. Obviously. ;)

      Delete
    3. Electronics and I. Of course I meant that. :P

      Delete
    4. (Grammar and me also don't mix well. Can you tell?? ;)

      Delete
    5. I see a lovely daisy, so I believe it worked! Haha, no worries. I mix up the I/me stuff a LOT!

      Delete
    6. Whoohoo! It works! Thanks a ton! :D

      Delete
  10. Thank you so much! I have wondered how to do that!

    ReplyDelete
  11. Great post. Favicons are cool; I just keep forgetting to put one on my blog.

    ReplyDelete
    Replies
    1. Ha, no worries, Sarah. It was a last minute thing for me, too. :)

      Delete
  12. Ah thank you for this, I didn't have a favicon for like a year, and it always bothered me. I always admire people's favicons, even when they're really tiny, I definitely agree with you that they add lots to a blog. Like an icing on the cake.

    ~Noor

    ReplyDelete
  13. This was really helpful, I'll have to try this!

    ReplyDelete
  14. Sooo helpful!! I've thought before about trying to create one of those thinga-mah-jiggys (see? I didn't even know it's name. XD) but I never thought of it at a convenient time. :P
    Thanks for the tutorial, Abi! I would love to see more posts like this!

    ReplyDelete
    Replies
    1. Good! It was definitely on the end of my list, but then I noticed how few people had them. I'm glad it was helpful!

      Delete
  15. I have to admit ... I had no idea what a favicon even was. :P
    So thank you so much for doing the tutorial! I've got mine up! :D

    ReplyDelete
    Replies
    1. Hey, ignorance is bliss. I probably woulnd't have one if I hadn't seen it in the blogger layout. Then I could have saved myself hours on the internet. But oh well. Now I'm upping the Favicon population! :D

      Delete
  16. I had no idea what a favicon even was until you explained, so thank you very much! I shall go try to use this now...

    ReplyDelete

Comments are how I know you've been here! I try hard to reply to all the comments in a timely fashion, but regardless, know that if you leave a comment, I will read it and it will make me smile. :) Please no profanity or soliciting.