Friday, July 4, 2008

Clifinar favicon

Today I learned how to add a favicon to my clifinar blog on blogger. Favicons are the little icons that appear next to the web addresses, like the one you see above. When you visit some sites or bookmark them, these icons will make these URLs much more noticeable. These are “Favicons”, a shortcut for “Favorite Icons”.This is quite fun and easy actually, and I think it looks great. I started with designing a template. I used Adobe flash to create a logo that I think brings the clifinar spirit. The logo is a Big colourful "C" (guess why!) on a yellow background. I wanted something shiny and happy, so this is why I picked these colours. I then saved it as a GIF file. When adding a favicon, you must save it in an icon format: .ico.

There's a really nice website that does ir for you - favicon from pics. You get your image in an icon format and then you can use it for any purpose. But, this is not everything. blogger will not let you upload the file from your hard drive or Blogger root directory. So, here comes the tricky part. The file needs to be hosted somewhere on the web. I used Google Page Creator for hosting my image, and found it quite easy to use. The file was stored under a directory that looks like this web address: http://yoursite.googlepages.com/youricon.ico. Your “yoursite” is your Googlw account name, and “youricon” is the file name for the icon. I Copied this URL and added a bit of a code to the clifinar blogger's HTML.

Under the title tag that containes:
data:blog.pageTitle/
I added a link refernce:

of your the icon file' rel='shortcut icon' type='image/vnd.microsoft.icon'

and that was it.

I refreshed the page, and saw the new cool clifinar favicon. I am really satisified with how it looks.

Here it is on a big scale:

You can tell me your opinion becuase I'd love to hear some comments.

5 comments:

bdturner said...
This comment has been removed by the author.
bdturner said...

I got the icon uploaded on my googlepages, but I can't quite get the html code right in my blog. Can you elaborate a little more on what the code should look like when finished. I am not very experienced with html. Thanks.

ilan said...

check this favicon-maker:
http://favikon.com/

Bree Hughes said...

Looks great! How were you able to get the flavicon to view in IE? Mine won't for some reason, it only works in firefox..

NesquikQuiko said...

what tod o if google does not allow any more pages? where can i uplead the favicon?