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!

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

MORE bloggy tutes