Bloggers usually want to customize their blogs like changing its look and feel and one of the parts of the blog that bloggers want to customize is the url icon or the favicon. In this post I will point some steps to be able to change your blog icon into your customized icon. I learned this by reading Isaac Yasaar's blog post and decided to share it to others as well. The steps are as follows:
STEP 1: CREATING THE IMAGE ICON. The first step is to create an image for your icon. Now the icon doesn’t need to be in ICO format, it can either be in JPG or PNG. I suggest you use PNG format because it has higher quality but make sure that the size of the image that you will create is 16x16 or 20x20. That way the file size of the image will not be large and so that your page will not take long to load. I will leave the image editing to your own skills.
STEP 2: UPLOADING THE IMAGE. The next step is to upload the image file that you have created to an image hosting site or service. You can find many image hosting services in the internet. In my case I have used PhotoBucket. It’s a free image hosting site.
STEP 1: CREATING THE IMAGE ICON. The first step is to create an image for your icon. Now the icon doesn’t need to be in ICO format, it can either be in JPG or PNG. I suggest you use PNG format because it has higher quality but make sure that the size of the image that you will create is 16x16 or 20x20. That way the file size of the image will not be large and so that your page will not take long to load. I will leave the image editing to your own skills.
STEP 2: UPLOADING THE IMAGE. The next step is to upload the image file that you have created to an image hosting site or service. You can find many image hosting services in the internet. In my case I have used PhotoBucket. It’s a free image hosting site.
After you have uploaded your image the next thing you should do is to get the direct link of the image that you uploaded. This is important because the link will be used to reference your image in the next step.
STEP 3: EDITING THE TEMPLATE. This step involves editing the template of your blog. After logging into blogger you will be directed to the dashboard. You can edit your template by clicking the Design link and the clicking Edit HTML.
STEP 3: EDITING THE TEMPLATE. This step involves editing the template of your blog. After logging into blogger you will be directed to the dashboard. You can edit your template by clicking the Design link and the clicking Edit HTML.
Note: If this is your first time to edit your blogger template then I suggest you save a copy of your template by clicking the Download Full Template link. This way you can reload your template if you happen to make a mess of it.
The next thing you need to do is to locate or find these tags: <title><data:blog.pagetitle> and <b:skin>. You can locate these tags easily by using your browser’s find tool (Ctrl+f). When you have located the tags, the next thing you need to do is to insert another set of tags in the middle of the tags that I previously mentioned.
<link href='put the direct URL of your image here' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
Note: remember to copy the direct link of your image and then place it as the value of the href.
STEP 4: SAVE YOUR TEMPLATE. When you have already saved your template then you are already done. The image that you created is now your new icon when you view your blog.
<link href='put the direct URL of your image here' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
Note: remember to copy the direct link of your image and then place it as the value of the href.
STEP 4: SAVE YOUR TEMPLATE. When you have already saved your template then you are already done. The image that you created is now your new icon when you view your blog.
No comments:
Post a Comment