Web Design 35S‎ > ‎

You've got a good head on your shoulders

These two sections, with title tags and favicons, should be added to your site index page.

(No sketch is needed for this assignment.)

One of the most useful but most overlooked HTML tags is the TITLE tag. If you want the title of your page to be displayed at the top of your web browser and in the tab buttons of Windows, you need the TITLE tag.
How do you use the TITLE tag? I'm so glad you asked. Aren't you glad you asked? If you are now, you might not be soon. (Bwah ha ha ha ha!)
  1. Load up one of the assignments into Notepad that you did previously.
  2. To use the TITLE tag, your page first needs a header. At the very top of your page, you need to put in the tags <head> and </head>.
  3. Below the </head> type <body>.
    • This is the same BODY tag that you use for <body bgcolor=red> or <body background=silly.jpg>.
    • If you already have a background color or image you don't need to use the BODY tag again.
  4. When you've done this, type <title> and </title> between <head> and </head>.
  5. In between <title> and </title> type the name of the page, or some other relevant information.
  6. Save the webpage you're working with.
  7. Now go back to your other assignments and add TITLE tags to them, too.
  8. Upload the revised webpages to your space on the Internet.


Do this part only if you get done the section with the TITLE tags.

If you look at the address bar at the top of this page, you'll notice that it has a small image that says "1648." In the same place on the Google home page, you get a stylized Google "G." This little graphic is call a "favicon."

  1. This favicon generator (or this one or even this one) will help you create a teeny tiny image for your very own favicon. As you design your image, keep in mind that it will be reduced to about the size of your finger nail. This means fine detail will be lost.
  2. When you've created your favicon, you're going to save it to wherever you save your web design files.
    • Make sure it's save as favicon.ico. No other name will work.
  3. In the head of your web page, put in the phrase <LINK REL="SHORTCUT ICON" HREF="http://yourname.whomever.info/favicon.ico">
  4. Make sure you upload your webpage and the favicon. If you've done it right, this little icon should show up in the address. As well, when people add your site to their favorites, it should also capture this icon.
  5. To give your own site a uniform look, add the favicon to your other pages.
James Dykstra,
Oct 2, 2014, 6:18 AM