The problem with the demo in class, was that WordPress translated the code into curly left-right quotes, putting “bad code” into your headers.

See the example below and retype the text carefully, or to to the link below… in W3 schools for tryout: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_link_sizes

To design:

Start of designing with a square of any size.

Reduce image size to 16 x 16 px

Save for web as favicon.gif

Method One

1. Upload gif into your images folder, then your index page.

2. Retype and  paste this code into your head tag (copying and pasting will reformat the quotes incorrectly)

3. Preview in browser!!!

 

Method Two

See  http://en.wikipedia.org/wiki/Favicon or http://blog.teamtreehouse.com/how-to-make-a-favicon