icon

How to add a Favicon

This page describes how to add favicons to web sites created with Google pages and Blogger

If you are using Firefox or Opera browser or IE 7 then look at the top where this site's address is written, to the left hand side you'll see a small image. This image is called the Favicon, means Favourite Icon.

This is the era of Tabbed browsing, how to make your site stand out among others?

Look at the favicons in the tabs. Google pages have all plain 'G' sign and Blogger has orange 'B' (far right). My site has a rising sun image cause it describes my passion for Solar Energy. Similarly you can also have your own favicons very easily.

You need

An image editor, MS paint, Paint.net (free download) are good choices. Photoshop will do too, however it can't save a file directly as icon (.ico).
You can use this web service http://www.html-kit.com/favicon/
Or if you want the software on your PC, use PNG to ICO converter, available freely, download (90 K)
Imagination

How to

First, make the image you want in the image editor (I recommend Paint.net).

Some Tips

For comfortable drawing, it is advisable to start with a 200x200 image size, when finished, shrink the image to 32x32 pixels.
Use only bright primary colors (Red, green, blue, yellow, black etc) as far as possible because these are eye catching and look good in very small images.
Refrain from adding details to the image as it'll not look good. See an example;
I have added drop shadows and shine effects to this image, can you see 'em, nah, I guess. Background of this image is a gradient. No, not a good one.
Now see this; No effects simple colors but still eye catching.

Now you've made that perfect image, time to save it as a icon file. To do this;

Save the image 32x32 or 16x16 pixels as a PNG file. Paint.net can do that.
Don't name the file as 'favicon.ico' it'll get confused with the original google favicon and will not work, rather name it as 'myicon.png'
Use the Web Service as mentioned above (link). Open the zipped folder and rename the favicon.ico file as myicon.ico, and skip the remaining steps below.
Or Locate the 'png2ico' software you downloaded earlier. Don't click on it as it'll not work like that. Copy the 'png2ico' file to "C:/Documents and Settings/your user name" folder.
Then copy your created png file to the folder mentioned above.
Now, click 'Start' then select 'Run', type in the box;

png2ico myicon.ico myicon.png

click 'ok'

Now rush to the folder and you'll find the nice image you created, as an 'ico' file.
If it doesn't work read these instructions carefully and mail me if you still can't use it. [mridul.nangal@gmail.com]

Now you have the image, just upload it to google pages and then paste this code as described below, to the website you want to.

For Googlepages, edit a page, click anywhere on title or footer and then click 'Edit Html' link on the lower right side of the window. Paste the code there and click Save Changes button. Now publish and see the results.

For Blogger, open Blogger Template and go to 'Edit Html', locate the <head> tag and paste the following code after it.

And Save changes, open the blog and see.

Comments? just Mail me or drop the comment at my blog.

Regards,

Mridul Kashatria

About Me

Blog: Sun Energy World

Blog: Nature..

You need

How to

Some Tips