Change Your Blogger Icon

A “favorite icon” or favicon (pronounced fav-eye-con) is a 16×16 pixels icon that appears next to a website’s URL in the address bar of a web browser. If you are using a browser that supports tabbed browsing, the favicon will also appear next to the page’s title in a tabbed document interface.

If you look at the top of this page, at the left hand corner of the address bar, you will see a small graphic of a portion of a something very “artsy”. That is the favicon for this blog. If you are using FireFox or Opera, you will also see that icon in the tab. If yours is a personal blog, its upto you to use which photo. If you have not done anything to your blog template, the address bar of your blog may look like what you see below:

Now you know, rite? The favicon in the screenshot above is the standard Blogger favicon and this will be the favicon for all blogs by default. 
If you want your own favicon, these are the steps to put your own favicon into a Blogger or any blog.

1-Backup your template and backup the Page Elements

2-Convert an image file (jpg, png, gif, etc.) into an image with a .ico extension. Google for “free ico generator” or try this one. It is the best I found so far: – Dynamic Favicon for Blogger
All you need to do is to sign up for a free account (I think if you don’t want to, this may not even be necessary), click “browse” and select an image from your computer. 

Upload, and that generator will not only generate the .ico image for you, at the same time it will host the .ico image on the web and give you the .ico image URL in the same page. In fact, it does better than that. It gives you the code for you to copy-paste into your blog template:

3-Go to Dashboard and get into the LAYOUT of the blog you want a favicon for. Click EDIT HTML and look for . Paste the code you get from above and preview. If everything OK, click “Save” and your blog will have a favicon different from the standard Blogger favicon.
for example:

If you find it’s not work, you can try this tips, just move your codes for the favicon from it original position in the template to just after ]]> and just right before , preview and if everything looks all right, save template.

Actually, I left the original code for the favicon in its original place and copy-paste to just after ]]> and just before

This is how that section of the template looks like after the fix:


Hope you may want to try it and enjoy your new favicon.

*Some html script being bit different from the original to allow me to make this post. 

Tinggalkan Jawapan

Masukkan butiran anda dibawah atau klik ikon untuk log masuk akaun: Logo

Anda sedang menulis komen melalui akaun anda. Log Out /  Tukar )

Google photo

Anda sedang menulis komen melalui akaun Google anda. Log Out /  Tukar )

Twitter picture

Anda sedang menulis komen melalui akaun Twitter anda. Log Out /  Tukar )

Facebook photo

Anda sedang menulis komen melalui akaun Facebook anda. Log Out /  Tukar )

Connecting to %s

Create a website or blog at

Atas ↑

%d bloggers like this: