Learning Outcome

At the end of this lesson, you will be able to:

• add a favicon to your website 

Review

• using Chrome's developer mode to inspect your website

Lesson

• if you inspect your website from GitHub Pages using Chrome's developer tools you will notice you have an error:

  • what is this favicon error?

• one of the easiest ways to get a favicon is to use: https://favicon.io/favicon-converter/

• go over how to add in the favicon

  • I used the image below

• on GitHub Pages ensure you DO NOT just have a "/" before the file name:

  • href="favicon-32x32.png"

  • or even better

    • href="./favicon-32x32.png"

Daily Assignment

• extend your ICS2O Unit1-05 Github Classroom Assignment for MDL HTML repo

  • In addition to the MDL components from Unit 1-05, you must include a favicon, using some other image than the one I used

• publish your webpage on GitHub Pages if you have not done so already.

Extra

• create an "index2.html" file and a CSS file, with the following requirements:

  • 1 more HTML file, using MDL

  • a favicon

  • 1 element with a <div> and ID

    • <div id="hello-world">Some text here.</div>

• add this to your submitted work