photo p1_zpsc8a7232f.png  photo j2_zpsc3f43514.png  photo p2_zpse73671a0.png  photo j2_zpsc3f43514.png  photo p3_zps456abd62.png  photo j2_zpsc3f43514.png  photo p5_zps95486d0f.png  photo j2_zpsc3f43514.png  photo p4_zps481d5f13.png

Wednesday, June 25, 2008

How To Create a Favicon in Blogger - Works For Me Wednesday

Last week I created my very own little favicon.

For those that don't know, according to Icon J, a favicon is a "little icon that appear next to the web address at the top of your browser. The little icon is an special .ICO icon format and named FavIcon (short for "favorites icon"). And it also appears in your browser' Tabs and Bookmarks."

Basically it helps your website stand out in a list of websites. But, I just think it's really cute! So I created one of my very own last week. And several of you asked how I did it.

It was quite easy actually. I found this website using my best friend Google and it really did all the work.

Step 1. I already had an image that I wanted to use so I just went to Icon J's favicon generator and this website to all the work. I browsed my computer until I found the image I wanted to use and then I hit "Upload It".

Step 2. Icon J's will do a little work and then it will come up with two options - Direct Down Load or Hosting the Favicon for you. I chose to have them host it. It's free and that seemed to be the easiest method for me. So I went with the Direct Link option.

Step 3. Copy the HTML code that they generate for you under the Direct Link method.

Step 4. Here's where it gets just a little tricky. You will need to edit your Blogger template. I got a little nervous doing this. You should always back up your template before you change it. Just a little note - if you mess up your template - I won't know how to fix it! So, please proceed cautiously!

Now go to your blog and click on "Layout" in the Dashboard. Then click the "Edit HTML" tab.

Now you will need to search for the word “title” , this should be inside the header tags.You should find something that looks like this:

<title><data:blog.pageTitle/></title>

Just after that line, paste the text you copied from Icon J's in Step 3. After you have pasted it, click "Save Template".

That's it! That's all you have to do! You should now have a cute little favicon!

For more great tips and tricks, head on over to Works For Me Wednesday at Rocks in My Dryer.


post signature

36 comments:

the dragonfly said...

Whee! My computer is being crabby, but I'm going to try this later...

Thanks!

Kristen, pajama mama said...

cool...thanks for the information...there's so much to learn in the bloggy world.

Lisa@BlessedwithGrace said...

Cool. I have been wanting to do this. Thanks .

Megan Cobb said...

I'm gonna have a favicon with my new bloggy design and it is SO COOL! Yay!

Unknown said...

Thanks for sharing the tip, I've always admired those favicons!

Sue Wilkey said...

Wow- I would so love my little martini glass, but I'm scared to screw up!

Laural Out Loud said...

Thinking about changing my layout template is tripping me out, but I think I'm going to give it a try.

Donna @ Way More Homemade said...

I noticed that on my fave's list. Too Cute. Filed away for when I actually get a blog-over. Maybe for my b-day or blogiversary.

Unknown said...

This was an excellent post for Works For Me! I will be trying it soon!

Totallyscrappy said...

I always wondered how people did that!

Jaina said...

Oh I'm definitely going to do this when I know what picture I want to use, thanks for sharing!

Amy, a redeemed sheep said...

I have been trying to get this figured out for months and now I finally have a favicon!!! *happy dnacing*

Thank you!!!!

♥Lisa♥ @ FinalScore:Boys3Girls2 said...

THANKS!!!! i thankfully ended up here on my search on how to do that!!! it was super easy

www.theepictruth.com said...

Great blog. You should really white label your website url. Go into your blogger acct under Settings: Publishing and get a unique url like: www.amomslife.com (Or whatever you deem best) It makes it more likely that you'll get traffic. :) Hope that helps!

Anonymous said...

Aah nice
I found this blog one of all from a ocean of blogs, it is very much informative and having useful info... Realy helps

Anonymous said...

Thnx honeyyyyy I got my Favicon on my this site http://www.evolution-world.com

p said...

that was easy thanks to you!

Mommy to those Special Ks said...

THANK YOU!!!! That was so easy! :)

Jenni said...

THANK YOU SO MUCH!

Anonymous said...

you can download icons to create favicon at free icons

Anonymous said...

Beth, You are the BEST! Your instructions were SO EASY to follow! I was just about to give up and then I found your Blogger through Google, followed you steps and there it was...MY FAVICON! Yes, thank you SO MUCH! Check it out!
www.lakerliker.com

Salman said...

Superb very nicely illustrated I tell frankly I surfed many sites on google for creating favicon but this is very awesome.

Regards
Salman
www.tips4blogging.co.cc

Courtney @ One Fine Wire said...

Thank you so much for this wonderful information!

Fork1 said...

This was perfect! Every other post I checked into had a very detailed description for this trick. Thanks!!

LBR said...

it worked. after hours spent on several occasions trying to get a favicon uploaded correctly to blogger, i found your site and decided to follow your steps and it finally worked. thank you. www.breatheyall.com

Lily J. Noonan said...

Thank you so very much for the quick how-to on favicons!!

JJuane said...

Thank you for this guide. I easily installed a Favicon on my blog because of you. Works like a charm.

Sabr said...

Thank you so much! Without tech saavy people like you, me and my blog would be lost in a world of vanilla.

Stephanie Wilson she/her @babysteph said...

I'm way late to the game but I wanted to say thank you- this worked for me and I appreciate your tips so much!

Steph

HP CE285A Toner said...

Just used your tip for my blog to have its own favicon.

Thank you very much.

Shannon said...

Thank you for posting this! It was super easy!

Metaphysical Goddess said...

Thank you I spent hours trying to figure this out with other instructions on the web but yours worked in minutes.

Anonymous said...

Thanks for the favicon guidance - really very helpful. My blog feels that little more 'dressed' now :o)

Meena Kannan said...

yeah........i worked for me...thnx a lot.....

Karla said...

YOU ARE AMAZING! I was just about to chuck my laptop out the window after *several* tries using other websites and Google tutorials! I re-Googled, saw your site at the top of the list, and thought, "Now she's a mom, she doesn't have time to spend hours and hours on one silly little picture." And, like you said, 'Voila!' It was simple and easy! From one mom to another, THANKS!!

Mandy said...

Thanks so very much for your little tutorial. Super helpful! I had googled and installed plugins and nothing worked. This website did. THANK YOU!!