I'll give you the tutorial to customize the way your blog look. First customization is to change the favicon of your blog. But do you even know what is favicon? Favicon is a little icon that precedes the URL in the address bar of your browser. Favicon is also displayed on the title tab
Now take a look at your blog addess bar. Do you have an icon? Do you like it? If you do, fine. But if you don't , actually you can change it as you want. Now that's what this post would tell you :)
Blogger/Blogspot default icon is
and now look at my blog favicon , which is like this
Beautiful, right? No, no, i didn't say that blogger's default favicon is not good. I mean if we have our own style it will look much better, right? Okay, here are the steps to change your favicon.
1. Make sure you have a .ico image type. If you already have a .ico image, proceed to step number 2. If you don't , then let's make it first. Actually you can use image type PNG or GIF, but it'll not appropriate, and moreover Internet Explorer can't read it. Prepare your JPG, PNG or GIF image, make sure the image size is square, same in width and height. If it isn't, crop or resize it using your fave image editor software. And now let's convert the JPG/PNG/GIF image to ICO image. How? The simplest way is through this site iConverticon . Choose your image, the click on Convert button. After that you will be directed to the page where you can choose and download your icon. Choose 32x32 size for better quality.
2. Assume that you already have an icon image. The next step is putting your icon file in the server. If you have your own hosting, just put that in public_html folder. If you are, in the same condition as me, doesn't have any web hosting, then let's have it, for FREE of course :D . Go to 110mb , open an account there, activate, verify and so on, until you have full command of this account :) . Upload the icon file you have to your free 110mb hosting.
3. Now we have uploaded the icon image file. Grab the image link. For example, mine is like this http://dioadi.110mb.com/favicon.ico . The next step is to embed the file right into your blog. The html code is <link href='IMAGE URL' rel='shortcut icon' type='image/x-icon'/> . Change IMAGE URL with your image link. Where to put the code?Go to Dashboard -> Design -> Edit HTML and find this line of code.
Put the code right before tag . Or put it between tag ]]</b:skin> and tag </head> . Look at the image above.
4. Save your template, and tadaaaaaa, you should see the new favicon on display replacing the old one.
and now look at my blog favicon , which is like this
Beautiful, right? No, no, i didn't say that blogger's default favicon is not good. I mean if we have our own style it will look much better, right? Okay, here are the steps to change your favicon.
1. Make sure you have a .ico image type. If you already have a .ico image, proceed to step number 2. If you don't , then let's make it first. Actually you can use image type PNG or GIF, but it'll not appropriate, and moreover Internet Explorer can't read it. Prepare your JPG, PNG or GIF image, make sure the image size is square, same in width and height. If it isn't, crop or resize it using your fave image editor software. And now let's convert the JPG/PNG/GIF image to ICO image. How? The simplest way is through this site iConverticon . Choose your image, the click on Convert button. After that you will be directed to the page where you can choose and download your icon. Choose 32x32 size for better quality.
2. Assume that you already have an icon image. The next step is putting your icon file in the server. If you have your own hosting, just put that in public_html folder. If you are, in the same condition as me, doesn't have any web hosting, then let's have it, for FREE of course :D . Go to 110mb , open an account there, activate, verify and so on, until you have full command of this account :) . Upload the icon file you have to your free 110mb hosting.
3. Now we have uploaded the icon image file. Grab the image link. For example, mine is like this http://dioadi.110mb.com/favicon.ico . The next step is to embed the file right into your blog. The html code is <link href='IMAGE URL' rel='shortcut icon' type='image/x-icon'/> . Change IMAGE URL with your image link. Where to put the code?Go to Dashboard -> Design -> Edit HTML and find this line of code.
Put the code right before tag . Or put it between tag ]]</b:skin> and tag </head> . Look at the image above.
4. Save your template, and tadaaaaaa, you should see the new favicon on display replacing the old one.
Categories:
Tutorial
