Learning Report No. 04

Creating a Favicon

Something that I've been wanting to learn how to do with my website is to have a customized icon in the next to my URL at the top of the browser. In my opinion, when sites have that icon customized it makes the site seem more credible and professional. It is a small thing, but when the icon is the generic world or blank page icon, it seems like the creators don't care enough to finish up their site.

What I Learned

I learned what that icon is called, A Favicon.

I went to classmate, Jed's, learning report about Favicons, because he did a report on them. (yay! because I was going to google, "how to make custom icon at top of screen" which may have given a plethera of bad results.)

To avoid copying his learning report, I continued to his source, "How To Create And Install favicon.ico" by Matthias Benkmann.

From this site I learned that "Favicon" is short for "Favorite Icon", or a bookmarked link icon.

How I implemented it

I did not need the tutorial on preparing the image because I have learned that from past design classes. I have an existing logo in photoshop that i shrinked to a 16x16 pixel image. I did realize at that small the logo does not read as well as when it is full size, so that is something I will adjust in the future.

In photoshop, instead of simple saving it, and naming a jepg, I selected to "Save for web and devices".

select save for web and devices

This option allows the user to adjuest the settings to create an image that uses less memory without depleating (too badly) the quality of the image. It also allows to save as a .PNG with a transparent background.

saving as a .png allows for a transparent background

Then I followed the instructions of converting the .png to an .ico with the Dynamic Drive-Favicon Converter that Jed suggested. I then placed the file in my root folder. Because it is called, "favicon.ico" the server automatically implements it as the favicon for all the pages in my root. An alternative way to implement the favicon would be to place this code:

<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

in the "<head>" portion of the HTML.