Create a google toolbar button for your website
Create a google toolbar button for your blog

 

Resources

Google Editorial Guidelines
Google Guide to Making Custom Buttons
Google button gallery
Submit your completed button to Google

Google Toolbar Button Quick Start Guide

This will show you how to :

 

Step 1 : Create an xml file

Here is an example xml file for a Google toolbar button.

A) Open your favorite text editor and copy/paste the contents of the xml file.
(Click your mouse in the box and press CTL+A) (hold CTL down..don't let go..and press A)
The contents will highlight then click Edit->Copy on the menu bar of your browser
Then click Edit->Paste into your text editor

B) Change the following lines in your text editor to customize your Google toolbar button:
The things you need to change are green

<title>Fun Costa Rica Vacations</title>  ?
<description>Pictures, suggestions, and free travel advice for fun Costa Rica vacations.</description>  ?
<site>http://www.fun-costa-rica-vacations.com/</site>  ?
<feed refresh-interval="3600" refresh-menuitem="false"> http://www.fun-costa-rica-vacations.com/costa-rica-vacations.xml</feed>?

C) Ok, the final step is to encode your favicon into base64 (a bunch of numbers) and place them between the icon tags.
If you don't have a favicon the encoding below makes a monkey (that my daughter hates!)
Remove the icon tags and everything between them if you don't have a favicon (but you really need a favicon):
To add your favicon remove the existing numbers (shown in green) and insert your base64 encoding using the tool below.
<icon type="image/x-icon" mode="base64">
AAABAAEAEBAAAAEACABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAEAAAAAAAAAAAAAAAEA AAAAAAAaITIAbXiUAKHI5AAaVWgAJWWEAHyluwBOmMIASX+iAJKsxABXeJIAhpSnADaDowA+ZHwA b5i4AMnU8gAxgZ4AMn+fAF+XxgBSiagAP1dzAKTD2gArQlgAZIqtAG+hvwApWXEASnOgAFyiygBg iZ8Ad5SpANLp/wAWJjIAa6rWAD5hbwA+dZQAEiM4AB9PZwBakb4AeJCWAFeVuwBCiJ8AKF53AHey 3wC+5f8AFmODABgsRQCn0+sAUZSrAMDe9wCKqcAAPGV+AB08WwBZhJ8AWpTFALjW7wCPsswAVnyc AC53lQBRkLwAT466AM7w/wDv//8ANnmaAIWInQBykagAVml+AIqcswAydZYAQG6GAK7K4gA6gJEA M2GDADhyjwBVgJUARYWjAFSWuQDp9/YAP2aCAP/+/wAlU3UAobnLAIyMngANJTsAUYKiAFhnegCL mK4ATE9dAL/o/gBXepQA4ev/AHqYsQB4lq8ANH2jAD9jdQCjs8oAlrfRAFCJqAB6kacAUYyfAEeO qQBVgqMAXHmgAMrn/ABiY20AS3+jAFKPuwA3gaMA6OvvAGyDmQBZiqQAQI6zACFshgBCdJAASIOx AEVUbgBLgaAAO2qJAJe81gBQjqwAO2N/ACA4TABifpYAyej/AEJqjQBWkbkAMlV2ADpuhQBLe50A N2iCAISNqAA6X3sAU53HAD5cdQAAEyUAGkxoAE1ldwBVlqsARGOCAEJ+mwCMqb4AaoKYADNsewD7 //YAXpzFADdkfwCYnbYASo+qAM/u/wA6epMAna/MAEyBrABYlr8AWpe3AG6KrQAoX3oAOHGHAM7f 9AB/mbEAVJGxABMUKABap8gAMWqKABlBWgAAFikAPHWcAHOQrwBZnL0AQXGNAENshQC3y90AN2eD ADl6oABWiKYACkNcAAASJgCs2/cALll6AKu/0QBVlLYAqNLpAG+x1ADE9v8AUIqdABM7TgBbka8A R32eAB9AYQAfXnIAVGJoADVqhQCXtc4AMGKAAGyPqQBtjaoAL0RaAB8tQwCv0OoAweD5AD1pgAA+ ZYEAqNDjAImnwABdnb8AT4qqAHF8kABol7YA09PZADJcfwC31u8AO1R0ANLi8wBHfawANFZtAGCk yQBRkbMAkaHFAEmEtQAIJEcAQHGRAEWDpwAZL0sAK1p1ADmApQBQja8ALmaJANDw/wBeaYQAGjxT AF2WwwC72O0AU5vDADRbcQBppMwAZYutACBEVgAwU20ASHmTANPu/wBMdI0AWJ/FAElxlABAeJUA IFFxAKjC2gBqpsoAPGuHADyEogBOe5YAiK3HAGGdywBiip0ARnaYABZAXQBancQAQnaUAIultgDK 1uIATmyZR6u52yythHei5sV//XoYKPDMMpRdqNGw/ulII2/f69z2xld5Zey0DhQTUg+I8YX0M4EJ L+QcrljE0H5uUae8qXa/g0R4Py0BNtj6J//Tt6ZMNQicMOBWgMCYRrpq4l9z9/Jri1o7x5C9HQ1h ze3KF15gIhVZdPk+hnHqtVVj3r7DQMLByAIFnh4AiprhZ7HZkpsKQc8qslC7Zk+s1to36O/Or/uh DNIZZKQbXFQSBNVK1LPJdYn1nbiXkZMxQ93u5QaCGvyqRS6lW21CjyCjeyn41zQRJH1y53CVfMsl IaDzjjkfaJYHJjrjFlNNS4wDh2I4ECsLPWmfSbY8jQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=
</icon>


To do this use this tool and upload your favicon that will show on the google toolbar button.
The tool will convert the image to a bunch of numbers that need to be placed between the icon tags shown above.

D) Finally, save the xml file using the filename of your choice. I used googletoolbar.xml.
This file will be uploaded next.

XML file contents  Back to instructions

 

 

  Back to instructions
Upload your favicon.ico :




Create a Google Toolbar Button