Custom Icon for your Website

Saturday, August 16, 2008

Custom Icon for your Website

Custom Webpage Icon
How about changing the Icon shown beside your webpage ? How about putting the image of your cat (or dog) in the place of the Orange B (for Blogger) ? It can be an animated one also !

It is so easy... Lets jump in...

1. Backup your layout (For Blogger only)

Go to Layout -> Edit HTML. Click on Download Full Template. Save it giving some name to remember what you are about to do.

2. Lets start

You will need - A cute image for icon & A cute word if you want a scrolling animation.

3. Create Icon(s)

Go to http://www.html-kit.com/favicon/.
- Browse and select the 'Source Image' (better be square unless you want it to be stretched).
- Add a 'Scrolling Text', if you want it to scroll with the icon.
- Check 'Animate Favicon' if you want an animated icon.
- Click on 'Generate Favicon.ico'.

You will be taken to another page after processing. A preview of your icon will be shown.
- Click on 'Download Favicon'. It will download a .zip archive. In the zip file, you will find favicon.ico and inside extra directory, you will have your animated_favicon1.gif. Extract these two files.

4. Uploading Favicons

[ If you have access to the root of your website, then you can just upload the favicon.ico (the name is important) to the root and it will be taken automatically. ]

Upload the two files to a location from where you can access them properly. Lets say "www.yourspaceforpics.com/favicon.ico" and "www.yourspaceforpics.com/animated_favicon.gif"

5. Back to your template (For Blogger only)

Go to Layout -> Edit HTML.

6. Where to place the code?

Find this piece of code...

<title> in the <head> section.

Your are going to place the new code just above this line.

7. Placing the Code

Paste the code.

<LINK HREF='www.yourspaceforpics.com/favicon.ico' REL='SHORTCUT ICON'/>
<LINK HREF='www.yourspaceforpics.com/animated_favicon.gif' REL='ICON' TYPE='image/gif'/>


Don't forget to change the path of the files to where you actually uploaded them.

8. SAVE TEMPLATE (For Blogger only)

Save the template.

FINISHED !!!

Whenever the Webpage is loaded, it will show the animation, and will show the icon without animation once it finish loading. You can use different icons for different pages of your website.

Happy iconing :)


See also...

» DZone Button in Blogger Posts

» Placing Adsense in Blogger Post


ATOzTOA : Latest Headlines


1 comments:

Post a Comment