Wednesday

Adding favicon icon to Blogger URL

When you visit the sites or bookmark them, these icons will make these URLs stand out. These are “Favicons” or “Favorite Icons”. You would first need to have an icon which you would like to use, bearing the extension .ico format. If you search your hard disk, you might find some icons which are generic. I would suggest that you create one to represent your own unique identity. There are quite a number of free icon editor software which you can download from the net.

As for myself, I went to vso software site and downloaded a very small program called VSO Image Resizer (download) which can transform images into .ico format. Run the program. It is rather simple to use. While you can create icons in 2 sizes – 16x16 and 32x32 – I would think a 16x16 icon is preferable since it is readable in most older browsers. and safe it under jpg, gif or png format.

If you do not wish to download any software, you may also try creating an icon online. Just enter the keywords “online icon generator” into your Google search bar, and you should be able to find several programs that you can try.


Google






Once you have created an icon, save it into your hard disk. The next step of attaching the icon is a little tricky. The only method to use will be to upload the icon into some free photo hosting such as photobucket and create a link.

Once you have done that, take note of the URL of your icon. If you are using photobucket , you will see that the file is stored under a directory which looks like this:

http://i245.photobucket.com/albums/gg69/dk/icon-1.ico

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 insert the following code below the line:-

Examples icon file format:

<link href='URL of your icon file' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

<link href='
http://i245.photobucket.com/albums/gg69/dk/icon-1.ico' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

IF you use png. or jpg. or gif. format file, its code should be like this :

Examples png. files format:

<link href='URL of your icon file' rel='shortcut icon' type='image/png'/>

<link href='
http://i245.photobucket.com/albums/gg69/dk/icon-1.png' rel='shortcut icon' type=''image/png'/>

Examples gif. file format:

<link href='URL of your icon file' rel='shortcut icon' type='image/gif'/>

<link href='
http://i245.photobucket.com/albums/gg69/dk/icon-1.gif' rel='shortcut icon' type='image/gif'/>

Examples jpg. file format:

<link href='URL of your icon file' rel='shortcut icon' type='image/jpg'/>

<link href='
http://i245.photobucket.com/albums/gg69/dk/icon-1.jpg' rel='shortcut icon' type='image/jpg'/>

No comments: