Today’s goals:
- Learn more HTML: how to add a favicon to your website
- Begin the HTML Championships!
Today’s featured website:
- http://oops.re/– Who said website error pages had to be boring?
Favicons
- Favicons are the tiny icons next to your page title in the browser.
- What’s ours on the class website?
- Favicons are 16 x 16 pixels and the code for adding them goes into the <head> section
- To make one for your website:
- Create one first
- Go to https://pixlr.com/editor/ and choose “create new image”
- Make the image width and height 16 pixels
- To make things easier, change the view from 100% to 300%
- You are going to make a favicon that’s your first initial. You will need a background color and a text color
- To change the background color, pick a color by clicking on the color box in the tool bar on the right (bottom of the bar)
- Select the paint bucket tool (4th from top on the right) and click in your box to make the background the color you selected
- Now pick another color for your text
- Click on the type tool (letter “A”, second from the bottom), click in your box, and type your initial. Change the font and size to something you like (the font will be no bigger than 8 or 9 px roughly)
- When you’re done, go to file save, and call your image favicon. MAKE SURE YOU SAVE IT IN THE SAME LOCATION AS YOUR WEB PAGE (desk top or folder)
- Add the code
- Now add this code to your <head> section to link your favicon to your webpage:
- <link rel="shortcut icon" href="favicon.jpg">
- Now add this code to your <head> section to link your favicon to your webpage:
- Want an image as your favicon?
- Try here http://www.favicon-generator.org/
- Create one first
HTML Championships
- The HTML Championships brings together everything you’ve learned over the past few classes about HTML. Your goal is to finish the HTML Championships by the end of class on Friday. We will review it together next week.
- Click here to get started!