6:39 PM
iwan RFID
Most bloggers (Blogspot users) are eager to uniquely customize the appearance of their blogs, and one of the small but significant customizations is changing the icon / favicon. This article will explain about how to change your blog icon, from the default Blogger icon to your own custom icon. I have used this method myself so I am sure it will work for you as well. Would you like to know more?
Recently, I had changed my tab icon of my blogger site. It used to be a common blogger icon which is an orange rectangle with the white letter B inside it. I changed it into my custom made icon of a sky blue rectangle with vertical I and Y (my initials), which also looks like a winking smiley. If you are interested in doing the same, here are the steps to do it:
1. Prepare an image, can be JPG or PNG format. I suggest PNG format because its size will be smaller by a 4:1 ratio. It means that a 10 Kb JPG image will be a 2.5 Kb in PNG format. Also make sure the size is small like 20 x 20 pixels or less, so the file will be smaller in size and won't make your blog loads slower.
If it's difficult for you to edit a small image, you can make a bigger one first, like 200 x 200 pixels or more, and after finish, you can skew it smaller. Microsoft Paint can do it for you easily.
2. Upload the image to an image hosting service, like the free PhotoBucket. Then, obtain the direct link to your image for the next step. You can use another image hosting service if you like, just remember to get the direct link.
3. Add this bold tags to your template. To access it, click "edit html" in "layout" section. Put them in head section, between "title" tag and "b:skin" tag. If you face difficulties in finding the tag, just use the find tool in your browser. In Mozilla Firefox, the shortcut is ctrl+f. If you use another browsers, apply with adaptation.
Recently, I had changed my tab icon of my blogger site. It used to be a common blogger icon which is an orange rectangle with the white letter B inside it. I changed it into my custom made icon of a sky blue rectangle with vertical I and Y (my initials), which also looks like a winking smiley. If you are interested in doing the same, here are the steps to do it:
1. Prepare an image, can be JPG or PNG format. I suggest PNG format because its size will be smaller by a 4:1 ratio. It means that a 10 Kb JPG image will be a 2.5 Kb in PNG format. Also make sure the size is small like 20 x 20 pixels or less, so the file will be smaller in size and won't make your blog loads slower.
If it's difficult for you to edit a small image, you can make a bigger one first, like 200 x 200 pixels or more, and after finish, you can skew it smaller. Microsoft Paint can do it for you easily.
2. Upload the image to an image hosting service, like the free PhotoBucket. Then, obtain the direct link to your image for the next step. You can use another image hosting service if you like, just remember to get the direct link.
3. Add this bold tags to your template. To access it, click "edit html" in "layout" section. Put them in head section, between "title" tag and "b:skin" tag. If you face difficulties in finding the tag, just use the find tool in your browser. In Mozilla Firefox, the shortcut is ctrl+f. If you use another browsers, apply with adaptation.
<title><data:blog.pagetitle>
<link href='put the direct URL of your image here' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
<b:skin>
<link href='put the direct URL of your image here' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
<b:skin>
Save and done! Visit your blog, open a few tab, and you should see your new icon there. It is very simple, so feel free to try it
0 comments:
Post a Comment