Thursday, September 29, 2011

How to Create a Favicon

What in the world is a Favicon? I hear you asking. Well, see that little stack of books up my URL? That's a Favicon. I just wanted to take you all on a quick tutorial of how I created mine. I like Favicon's becasue it sets your blog apart from a sea of orange B's.

Just start with an image: 
The image must be a .jpg (most images are).  As you can see, this image is much too large to fit up in the teeny-tiny space up in the blog address bar. So the next step is to shrink it.

I used Shrink-pictures .com. All you have to do is add the image and select the smallest size setting (100 pixels in this case). It will then send you to a page where you must download the image, this will be sent to a temp file so make sure you save it to your hard drive.

This is what it looks like after.

Of course, it is still too big. Plus the favicon has to be square, and this image is not. The solution? Iconj.

Just insert your image in this nifty looking box -


and out comes the code link for your favicon. (You'll probably want to download the pic and save it too.)

Next, go to your design tab (or if you're using the new blogger layout the template button on the left sidebar) then click the link "edit HTML" button. Next use ctl+F to find this line - <title><data:blog.pageTitle/></title> (copy and paste this into the ctl+f search box)


Directly below this you will want to insert the link iconj gave you. This is what it will look like -

Then your image should appear by your URL!

You'll also see in the design tab (or the layout button on the new interface) a place for a favicon - this is just for when your blog appears in blog rolls on other sites. If you want this then just add the downloaded image from iconj to the spot directed.

I know this can be confusing, I had a hard time figuring it out myself. If you have any questions just ask me and hopefully I'll be able to help you make your blog beautiful!

20 comments:

Joanne said...

I have a Favicon on my website, but not on my blog. It's definitely something to consider to give our blogs a more personal touch.

Ava Jae said...

I actually just added a favicon to my blog yesterday, but it doesn't seem to be showing up on every computer. Oh well. It's not that tragic, I suppose, but it does add a nice touch when it works.

Abby Fowers said...

I love favicons! I'm so glad you shared this. I just barely figured it out not long ago, but this is fun for everyone to know. :)

elizabethreinhardt said...

This is awesome! I love when people post about these little things because, though I'm not too technically awful, I do sometimes wonder how certain little extras get added and just assume they're very, very complicated! I appreciate your posting such simple directions!

Terron James said...

Worked great!

Medeia Sharif said...

I've been using favicons for a while. I think they add a little extra flavor to a blog or website. And I like how there are free services that will create one for you with an uploaded image.

Jenny S. Morris said...

Thanks for the info. I will file it away for, when I have time.

Isabelle Thornton said...

Oh wow! You are good!
You should have been to this meeting! You are such a great blogger!
it was very fun...
Have a super day!
XO

Emily R. King said...

I tried to do this, but it didn't work. I'm going to give it a shot again and see if I can get it to cooperate this time. Technology hates me sometimes.

WilyBCool said...

Thank you so much! Works great!!!

Caitlin Vincent said...

What a great how-to :) I think I'm going to at least give it a try

Laila Knight said...

I thought you falcon at first...lol. And that is way cool. You are clearly gifted at this mess-with-your-blog stuff. Now if only I would just sit down and apply all your suggestions we'd be in business. :)

Lillie McFerrin said...

Thank you for the information in an easy to follow format! Can't wait to try it out.

David P. King said...

Pure genius. I think I know who to turn to whenever I need an update. Now I need to try this out. Thanks! :)

Scott Bryan said...

Thank you for this info! I'm going to try it as soon as I get a moment.

Sarah Pearson said...

I always wondered why some people had pictures, thank you :-)

Shannon Lawrence said...

I hope to do this when I can figure out an icon of some sort for my blog. Until then, I will have to stick with the orange B. Boo! Thanks for the info, though! Several good bits of information/resources there (the shrinking pics thing will come in handy since I constantly struggle with that when trying to upload pictures for various things--frustrating).

LynNerdKelley said...

Wow, what a great idea. I've never heard of a favicon before. I'd love to add the rat logo for the Monster Moon series I co-author, but I'm not good at technology at all. I just signed up to do a blogfest and can't figure out how to add the linky code! I'm going to bookmark this post, and when I'm feeling brave, I'll try it. Maybe when my son-in-law is around to help me if I run into problems! Thanks so much. That favicon looks favulous next to your URL!

Tara Tyler said...

did you know blogger added a way to add a favicon? it's at the top of the design page =)

J. A. Bennett said...

@Tara Tyler Yes, but when I did that it only added the favicon to when those places that had me on their blog lists. I had to put it in the code to get it to show up in the URL. That's why I suggested both ways :)