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!
................................................................................................
Thanks Jennie Bennett for another great post!!!
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!
................................................................................................
Thanks Jennie Bennett for another great post!!!
That's cool. I opened this blog up and noticed you had a different picture instead of the orange B and wondered how you did that. And now I know.
ReplyDelete