An example of a faviconA favicon (short for favorites icon) is a customized icon, which is also known as a shortcut icon or a website icon. It is typically a 32×32 pixel square icon. A favicon helps "brand" your website and provide a visual cue to associate your brand to visitors of your site. If a customized favicon has been uploaded to the root folder of your website or your Web page has set a link to the favicon, then the icon can be seen in the left of the Web page URL address bar, on the Title bar, and in the Favorites list when the link is bookmarked to Favorites.

Current browsers (such as IE9 and later) allow you to grab a favicon displayed in the browser's URL address box and drag it to the Favorites Bar as an easy-to-use shortcut. This also allows you to quickly identify your favorite sites by their icon. Below is a sample showing favicons in my Favorites Bar. Notice the [FW] icon in the URL address box, the Favorites Bar, and on the windows tab shown on the bottom left.

Favorites Bar

A site's favorites icon must be named favicon.ico. You cannot simply name a file extension .ico; it must be "Saved as type" or Exported as an .ico file. You can create your own customized icon using various techniques. If you do a Web search, you will find there are numerous icon makers and/or icon generators that can even take a photo and convert it to an icon.

For this Web site I created my own distinctive icon using my favorite photo editor/paint program. (See the yellow and blue [FW] icon in the URL address box.) I made sure to use colors that would stand out and characters that would be easily read even when saved as a small 32x32 pixel file. I also created each of the favicons shown in the figure above, such as the red headed woodpecker. In that case, I selected the original photo, cropped it, set the background as transparent, and resized it to 32x32 pixels. When done, my photo editor gave me an option to click Tools, and then choose Export as icon. The .ico extension is provided automatically (do not type in .ico yourself).

Once you have created a customized icon for your Web site, saved it as favicon.ico, there are two ways to get it to work. The first way is to simply upload the favicon.ico file to your websites root folder. However, if you find that it does not automatically dispay on all browsers, you can upload it your website's images folder) you can have your Web page link to it by adding the following code inside your <head> tags:
<link href="images/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
or this line of code may be used:
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
or this line of code may be used if your favicon is not placed in the images folder:
<link rel="shortcut icon" href="favicon.ico">

The two lines of link href code below are used on this page. The first link href links to the cascading stylesheet, and the second link href links to the favicon, which is stored in the images folder on the host server.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title>
Favorites Icon Demo</title>
    <link href="Tutorial.css" rel="stylesheet" type="text/css">
    <link rel="shortcut icon" href="
images/favicon.ico">
</head>

<body>Content Goes Here
</body>
</html>

For more HTML code samples see: www.w3schools.com
For other resources and tutorials see: quackit.com and htmlquick.com
ValidateValidate

Validation checks the syntax of your file, looking for both errors and possible issues when viewing your page in a browser. Some of the problems reported are missing end tags, missing characters, invalid attributes, incorrect nesting of elements...
 your file, see: http://validator.w3.org

Review Assignment Learning Project: 10 Practice Review Steps

Return to Menu   Top   Valid XHTML 1.0 Transitional