MOVarazzi

Thursday, January 31, 2013

898. How To Make Your Own Favicon (Tutorial)

Hello from Professor MOV!  Ever wonder how some people (from here on out to be referred to as “Computer Geniuses”) have a teensy tiny image right next to their http://  address in their browser?  That thumbnail image is called a “favicon.”  Instead of the default blogger orange letter “B,” these Computer Geniuses have mini ice-cream cones or martini glasses or purple unicorns. 

I secretly used to hate those favicon-savvy Computer Geniuses, and hope that inconvenient things would happen to them, things like their dry cleaning wouldn’t be ready or the Starbucks girl would give them the wrong coffee or that they would miss their turn on the freeway and have to circle back around.  Seems a bit unfair that the ones who paid attention in computer programming class now get to have a cool image next to their blog address, while the ones of us who were doing more important things (necessary things like sleeping, shopping, or watching re-runs of I Dream of Jeannie) are stuck with the generic orange “B.”            
Have you been wondering how you could get your own teensy tiny image next to your blog name without having to go to Computer Genius School or even having to pay attention very long?      

Guess what?  Now you can!  I will walk you thru it, and I absolutely promise it is easy and fast.  (*Disclaimer:  I am not actually a Computer Genius.)
First, pick your image.  You must have the rights to it, so it is preferable if the image in question is a photo you took or a drawing you did.  If someone else did the image, contact them and get permission to use it.  Make sure it is something that looks good tiny (so the Sistine Chapel is out, and a green amoeba is in).  Next comes the hard part:  cropping.  You must crop it into a square and it must be less than 100 pixels.  The way you can tell about that is by right-clicking on the image and viewing “Properties.”  You can adjust the size here by changing the length and width numbers.  This takes some experimenting and trial and error (or in my case, error and error and error and error and two full-sized candy bars).  Once you get the image how you want it, save it on your computer with a name you will remember (I like “my tiny favicon”). 

Now for the step-by-step instructions: 
  1. Go to “Design” on your blog which is right next to “New Post” on the top right
  2. Click on it and then go to “Layout”
  3. Once you are on that page, you will see “Favicon” on the top left side of your screen.
  4. Click “Edit”
  5. Next, it pops up “Browse images”
  6. Select your image you just cropped and shrunk, then voila! it will now be in front of your blog name in people's browsers (great for branding purposes)
I hope you like your new favicon!  And if this tutorial was helpful, please forward it to other friends and bloggers. 

xxo
MOV

22 comments:

  1. Thank you, thank you, thank you. Umm, I think.

    I did what you said and I thought it happened, until I went back to look at my blog and the favicon is not there. Maybe I have to log out and log back in to see it?? I'll try that.

    If not, it's back to the Favicon drawing board.

    Sign. Obviously, I am not as computer savvy as you, oh great one.

    http://travelbug-susan.blogspot.com

    ReplyDelete
    Replies
    1. The fix for this is to enter http://[your blog url]/favicon.ico in your address bar and press Enter. Then refresh the page and go back to your blog.

      Delete
    2. It worked! Yay! I have a favicon. Thank you.

      Delete
    3. Hi Susan! So glad you got it to work. :) And thank you to YB for the help too!

      Delete
  2. Take it from me, MOV is spot on with this post. I'm not just a reader, I'm an actual customer.

    ReplyDelete
  3. Wow, handy, MOV! I did not know that could be edited. hm...
    thanks!

    ReplyDelete
  4. Mongolians Opening Vehicles, thank you for this valuable information, plus the revelation of the Curse of Inconvenient Things. Makes me rethink everything...

    ReplyDelete
    Replies
    1. Ah, the Curse of Inconvenient Things. I feel a blog post coming on here.

      Delete
  5. Wow. I didn't even know what a favicon was until I read this post. You are truly the Mistress of 'Vicons. (Yeah, that was bad. Sorry.)

    ReplyDelete
    Replies
    1. I do like being the mistress of *something*. (not laundry though, please don't call me mistress of laundry)

      Delete
  6. Ok, you guys! I expect to see more purple unicorns in my Google reader from now on!

    ReplyDelete
  7. Nice! It's always good to know how to be more techy!

    ReplyDelete
    Replies
    1. Whew. I did my tech quota for the year. Now I can go back to writing notes on post-its and sticking them on the mirror.

      Delete
  8. I LOVE the favicon you made for me! I have always noticed websites with their own cool little thumbnail images, but I never knew what they were called or how to go about obtaining one. And now I have my very own!

    After I finished uploading it, I turned to Hubs and said, "Look! I have a favicon now!" And he said, "What's a favicon?" So I showed him, and he said, "Oh, yeah, those things!" So apparently I wasn't the only one who didn't know what they were called.

    ReplyDelete
    Replies
    1. Yes, the word "favicon" is very mysterious. I thought it might be illegal or at least make me gain weight. Come to find out it is the thumbnail image AS WELL as a popular island for honeymooners in Greece! (I might have made that last part up)

      Delete
  9. I LOVE tutorials that target the stuff that I was secretly afraid to admit I did not know. As soon as I saw your title, I was like "YES" followed by clapping to myself.

    ........and I'm being serious, I clapped to myself.
    I will be trying it out after I choose my pic.
    Thanks MOV!

    ReplyDelete
    Replies
    1. Hi J.R.! It is actually fairly quick and easy, and I ended up feeling embarrassed that I have blogged for 2 and a half years without a favicon. That is like walking around town with no shoes! (Or maybe it is like walking around the beach with no shoes where that sort of thing would not be noticed that much.)

      Anyway, thanks for the nice comment! :)

      Delete
  10. I have the world's best favicon, thanks to you! *happy dancing*

    (Email coming your way today. After work.)

    ReplyDelete

When you write a comment, it makes me feel like I won the lottery or at the very least like I ate an ice-cream sundae. (This has nothing to do with the fact that I did just eat an ice-cream sundae.)