Favicon Tutorial

Being a web developer by day {and at times by night}... I am suprisingly shocked that I have never once posted any web developing tips or tutorials on my blog. Go figure. So... without further ado... I give you my first {and hopefully not last} web tip.

This is great to use on blogs that do not allow you to upload your own custom favicon.  What is a favicon? A favicon is the little tiny icon that sits just to the left of the http://... in your address bar of your web browser.  This favicon can be customized to brand your blog or website.

Step One:
Using a photo editor such as Adobe Photoshop or Adobe Fireworks, create an image you would like to use as your favicon.  TIP:  The image resolution should be 72 pixels/inch. The image size should be 32 x 32 pixels square. Save your favicon as a GIF, PNG, JPG, BMP, ICO, or TIFF and must be less then 1MB in file size.

Step Two:
Go to http://www.iconj.com/favicon_hosting.php. Under the title Free Favicon Hosting, click on the Browse button and select the saved favicon image.  Just leave the Sharpen Level to No Sharpen.  Click the Upload It! button.

Step Three:
Now with your Favicon.ico successfully generated, you are given two options. 
A: You can do a Direct Download of your favicon and save the .ico file to your web server if you are allowed to.  Simply follow the instructions they provide to add your .ico image to your website/blog.
B: You can have IconJ.com host your .ico image and link to it from your website/blog by inserting the html they provide into your code.

Option A is typically for the advanced web developer that just needs to generate the .ico image file.
Option B is generally used by the non-web developer that wants to add a more custom look to their blog. The following steps will show you option B and how to install it into your blog code. 

Step Four:
Copy and Paste the code under the title Host It at IconJ.com (Direct Link)

Step Five:
In Blogger, you will need to login to your blogger account, click on the Design tab/link, then click on Edit HTML.

Step Six:
Just before the ending head tag paste the code you just copied from IconJ.com.  It should look something like this...

Click Save Template.

CONGRATULATIONS!
You can now view your blog and see your new custom favicon displayed in the address bar and the window tab.

What's your FavIcon?