Friday, 9 March 2012

How to change favicon of your blogspot?

Do you notice that your blog have an icon with a letter "B" in an orange square on your browser tab? It is too boring because that doesn't make your blog different with the others.
Now, it's time to change favicon for your blog. I will sho w you the simply step to complete this task.

Step 1: Create your new favicon
We can easily find an Icon Generator Online website on Google. For example, I use Favicon Generator and Gallery.
Open your browser and go to Favicon Generator and Gallery, you will see The Favicon Generator  at the middle of the page as the figure bellow


Click Browse and select your icon image. Then click on Generator Favicon button. Your new icon has been created. Click on the download link to get it to your machine.


Step 2: Upload your new icon to your Google Profile
Go to your Google Profile and select Photos tab and click on Upload New Photos. Select the icon that you has just created and upload it. After that, select it on your Image page. Right click on the icon image and select View Image Info as the figure bellow.


On the Image Info window shown, Right click on the image link and select Copy


Paste this link to a text file for the later use.
(If you don't have Google Profile, just create it or use another Image hosting to upload the icon)

Step 3: Change your favicon on your Blog
Go to Dashboard, select Template -> Edit HTML -> Proceed. The put the following code before the losing </head> tab.

    <link href='Your favicon url' rel='shortcut icon'/>
    <link href='Your favicon url' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
    <link href='Your favicon url' rel='icon'/>
    <link href='Your favicon url' rel='icon' type='image/vnd.microsoft.icon'/>

Copy the link that you had saved to the text file before and replace Your favicon url with it. Then, click save.
Now, your favicon of your blog has been change. If you still see the old icon, you need to clear the cache by click on Tools menu on your browser (I use Firefox), select Clear Recent History, then check on Cache checkbox and click on Clear Now button.
Congratulation, your favicon's blog now has been change. It make your blog distinguish with other blog.

You also can change your favicon by click on Layout on the Dashboard, then click on Edit on the Favicon Gadget. Browse your icon location and click on Save button.

Hope this helps!

0 comments:

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Bluehost Coupons