Learning Report 3

Creating a Favicon

Resource: http://www.clickfire.com/favicon-tutorial/

What did I learn?

This week I decided to learn how to create my own favicon. I feel like there are quite a few good reasons for using one. First of all, having a favicon can work as a great source of extra adverting. The simple, tiny little logo will be saved and used if your page is bookmarked, and it will act as a reminder of your website whenever it is seen. I also think that it helps you to appear more professional. Although it is only a small touch, it is much better then default logo that a browser would display.

After searching for a tutorial online, I found that creating a favicon is a fairly simple process. The first step is to create a tiny 16 x 16 pixel image. This is not too dificult, but there are tricks to creating more effective images. It is a good idea not too just shrink down a larger image because it will likely be distored, and it also a good idea to create a .png image so that you can have a transparent background. Once the image has been designed, you need to create it to an .ico file, and this can be done by using an online converter. Next you save it with the filenem "favicon," then upload it to your root folder, and insert one tiny piece of code into you site, and then you're done.

How did I implement it?

I decided that I would like a very simple logo, just my initials, "cf" in a couple different colors. I don't have programs such as photoshop or other adobe products, so I just messed around with paint and some other programs until I found something that I liked. Then I went to http://www.chami.com/html-kit/services/favicon/, where they a quick and easy to use favicon creator. You upload your image, and they produce a favicon.ico file, and also a favicon.gif if you would like to use an animated favicon. I decided to go with the .ico file.

After that, you simply upload your file to the server, and then insert this piece of code in the head section of your html file:

< link rel=”shortcut icon” href=”http://www.thenameofyoursitehere.com/favicon.ico” mce_href=”http://www.thenameofyoursitehere.com/favicon.ico”/>

Overall it is a simple process, and the result is a more professional and polished website.