Wednesday, January 30, 2008

FAVICON

Hopefully, you are seeing my Favicon on the left of the address bar in your web browser. If you are not seeing it, then you may have to refresh the page or add this blog to your favorites list.

This is how I added it. I found these instructions on this blog: Blogger Tips and Tricks

I created an image in Photoshop that I wanted to use as my icon. I created it much bigger than I needed it. Once it was the way I liked it, I changed the image size to 16 x 16 pixels (this is the size of an icon).

I then saved the image for web as a PNG 24 file. To add the favicon to your site, you'll need to have your icon creation as two files. A .png file and a .ico file.

You can use Irfranview to convert your .png file to an icon (.ico) file and host them wherever you want. Or you can do what I did. I already have an account on imageshack so I hosted the .png file there (you can't host .ico files there). I then used iconJ.com to host the .ico file. At iconJ.com you upload the .png file and it converts it to the .ico file and gives you the code that you need to point to the .ico file. I believe you can host both the .png and .ico files at MyFavatar.com, which would be a lot easier than what I did, but I couldn't get to that website so I had to find a different place to host the .ico file.

You will need to add some html code to your template in order to add the icon.

These instructions are for Blogspot.com only. I'm not sure how to do this from any other blog site.

From the Blogspot Dashboard click on LAYOUT of the blog you want to add the favicon to. Click on the TEMPLATE tab and choose EDIT HTML.

Find the <head> html tag (it should only be a few lines from the top) and put the following code right below it.


<link href='http://www.iconj.com/ico/3/37lxkucyl4.ico' rel='shortcut icon' type='image/x-icon'/>
<link href='http://img141.imageshack.us/img141/3429/faviconms9.png' rel='icon' type='image/png'/>

You can copy and paste this code into your template, but be sure to replace the image locations (i.e.; http://www.iconj.com/ico/3/37lxkucyl4.ico & http://img141.imageshack.us/img141/3429/faviconms9.png) with your locations.

No comments: