Thursday, May 22, 2008

How to add Favicon to Blogger

How to Create Your Own Favicon



Take a look at the icons on the right. Do you recognize any of them and the websites they go to? Many of them can be identified with a certain website by just looking them.
Favicons may be only 16×16 but they do have a very large impact on branding and your visitors web experience.




What should be your favicon?

It is hard sometimes to think of what image should be your favicon. It is not as simple as just resizing an image to 16×16 .ico formatted image. The problem that occurs is that not everything looks that great that small.

Usually you will attempt to resize part of your logo into a 16×16 space. If this does not work, you should either find or create a favicon that represents your websites theme. For example if your website is about cats, a favicon of a cat is a good idea. That is certainly an easy one, but you get the idea


What is the .ico format?

The .ico format is what your favicon needs to be saved as. In fact your favicon actually needs to be named favicon also. This format allows your browser to read the image and to display it on your tab bar, bookmarks, address bar, history and other areas.




Free websites that convert your images


Dynamic Drive Favicon Generator

Chami Favicon Generator




NOW upload the icon into some web folder, and create a link. You can read about using free hosts like Google Page Creator


UPLOAD YOUR ICON AND GET YOUR OWN .ico link


which looks like this http://yourname.googlepages.com/iconname.ico

where “yourname” is your Gmail account name, and “iconname” is the file name. Copy this URL.



Go back to your Blogger dashboard and under the Template tab, go to “Edit HTML”. Near the top you will see a line like this :-




<title><data:blog.pageTitle/></title>






Copy and paste the following code below the line :-



<link href='http://yourname.googlepages.com/iconname.ico' rel='shortcut icon' type='image/vnd.microsoft.icon'/>





Where “http://yourname.googlepages.com/iconname.ico”. is your icon file


NOW CLICK ON SAVE TEMPLATE








Other image types

The .ico image format has been used by many but you can also create an image under the .png or .gif format. Ensure that the size of the image is either 16x16 pixels or 32x32 pixels.

If you have a PNG format image, the link to insert is:-

<link href='http://yourname.googlepages.com/iconname.png' rel='shortcut icon' type='image/png'/>


If it is a GIF format image, the link is:-

<link href='http://yourname.googlepages.com/iconname.gif' rel='shortcut icon' type='image/gif'/>


No comments:

TopOfBlogs