What Is a Favicon And How Can I Get One?

NOTE: GoodNCrazy.com has moved to the world of self hosted Wordpress! If you haven't please subscribe to the GoodnCrazy.com RSS feed you'll still be able to find me over there! Cheers!

Those little picture icons on people's blogs, right up there next to the URL box.
Let's create a Favicon for Blogger.

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 125x125 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 16x16 pixel image. You then need to upload your 16x16 .jpg image to photobucket.

~~~~OR~~~~

Open Picnik.com.
Upload your 125 button.
Click to resize.
Change proportions to 16x16 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 16x16 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

11 comments:

Jessica Gottlieb said...

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.

Linda S said...

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

Jenners said...

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!

Joy said...

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

Alisha said...

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

Megryansmom said...

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!

Marketing Mama said...

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?

angie said...

Your new header looks great......love your favicon, too. Great tutorial.

I just turned 34. :)

kisatrtle said...

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

Jenni Jiggety said...

Hellooooooo! I am LOVING your new layout!

JudiElise said...

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


Oh my heck! I was featured. And it didn't hurt or anything!



Photobucket



gmbmbadge.jpg







1581884212_57276dd550_o