What Is a Favicon And How Can I Get One?

2009 April 7
Those little picture icons on people’s blogs, right up there next to the URL box.
Let’s create a Favicon for Blogger (blogspot).

See mine? I just changed it to match my new blog-do.

This is what the image looked like before I faviconed it…..

What you will need to make your own FAVICON:

  • A square image. (Likely you have a 125×125 pixel button— this will work.)
  • A photobucket.com account. Go ahead… create one, you can do it.
  • A way to make your square image smaller.
    Photoshop or Elements, or online picnik.com is useful.
  • You’ll need to know where your blogger html template is. (Be careful, always save your code somewhere, and always click preview before you save changes!)


That’s it. Are you ready?
~~~~~~~~~~~

Let’s assume for those of you with Photoshop:
1) I’m jealous (I only have elements) and
2) You know enough about it to change the image size of a 125 button down to a 16×16 pixel image. You then need to upload your 16×16 .jpg image to photobucket.

~~~~OR~~~~

Open Picnik.com.
Upload your 125 button.
Click to resize.
Change proportions to 16×16 pixels.
Choose save and share. Then upload to your photobucket account (it will be a .jpg file).

Next. There are 3 steps to insert the code into your Blogger HTML Layout.

1) find this code in your blogger HTML template: (use control f to search)

data:blog.pageTitle

2) a couple lines below the title code copy and paste in:

link href=’URL of your icon file’ rel=’shortcut icon’ type=’image/jpg’/
but first: and this is important… add brackets around the above code:

3) Go to your photobucket 16×16 pixel image and mouse over your it. Highlight DIRECT link and copy and paste this code where it says URL of your icon file, LEAVING the apostrophes where they are.

Okay test it out! Click preview to see if your favicon is live up by the URL! Then click save.

You are so favi-licious baby!

(PS I’m hearing that you cannot see favicons in IE so you have two choices. GET FIREFOX already. OR. Read some ideas at favicon.com)

Help others get their own Favion?

Tweet This Tute!Tweet Me from GoodNCrazy.com

{This is my Tuesday Tribute to Blogger I guess?? See more TT’s over at Half Time Lessons}

MORE bloggy tutes

Share Button
No Responses
  1. Jessica Gottlieb permalink
    April 7, 2009

    If you’re not able to purchase photoshop gimp is the shareware answer and will do all the same jobs.http://gimp.org/I'm a huge fan of open source software and posts like this remind me why.

  2. Linda S permalink
    April 7, 2009

    great! I know this now i have to do it! *smacks me on the hand*

  3. Jenners permalink
    April 7, 2009

    Love this! Love helpful blogging tips like this! I had one that my husband created for me after a lot of work and I wiped it out when I did a blog makeover and I didn’t want to ask him to do it again so thank you for giving me the keys to the kindgdom of Favicons! Awesome!

  4. Joy permalink
    April 7, 2009

    yours is not showing up. I use to have one but something happened not sure I will have to put mine back up

  5. Alisha permalink
    April 7, 2009

    haha, i don’t know why, but the little blue birdy made me laugh!Wow, need to stop eating those sugary jelly beans! Found you on Jays blog

  6. Megryansmom permalink
    April 7, 2009

    You’re so good at sharing helpful blogging tips, I’ll try it later when my head isn’t pounding and I can concentrate.Happy Tuesday!

  7. Marketing Mama permalink
    April 7, 2009

    I don’t see yours on my Explorer version 7… in fact, I put one up for my web site some time ago… I never see it in Internet Explorer… sometimes I see it on firefox. Do you have any ideas on that?

  8. angie permalink
    April 7, 2009

    Your new header looks great……love your favicon, too. Great tutorial.I just turned 34. 🙂

  9. kisatrtle permalink
    April 7, 2009

    I’m so gonna try this, but where oh where am I going to get a turtle that small?

  10. Jenni Jiggety permalink
    April 8, 2009

    Hellooooooo! I am LOVING your new layout!

  11. JudiElise permalink
    April 8, 2009

    Thank you so much for this. I just did it and it worked seamlessly. I actually uploaded jpegs created in all sorts of programs (Publisher, Logo Creator) into Photobucket and it worked fine.Will pass your page along.Judielise

Comments are closed.

WordPress SEO fine-tune by Meta SEO Pack from Poradnik Webmastera