Having a custom Icon for your web pages is something that makes your website so outstanding from the crowd of other websites in the browser. The added Icon shows up on the tab where your page has been opened and it helps the user to quickly identify which tab is your website just in case they have opened up so many tabs at the same time.
In this tutorial I am going to show you how you can add an Icon to your web pages. First you will need and image icon of the type ico and it should be 16 X 16 Pixels image or less but keep in mind it should be of a reasonable size whereby it’s visible.
At this stage I think you have created your icon, using any graphics software of your choice that can make icons. You can get a free download of an icon making software from icon maker. Okay let’s do some coding here. The following file my-page.html shows how you can add an icon to your web pages.
my-page.html
| 1 | <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> |
| 2 | <html xmlns=”http://www.w3.org/1999/xhtml”> |
| 3 | <head> |
| 4 | <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> |
| 5 | <title>Adding An Icon To A Web Page</title> |
| 6 | <link rel=”shortcut icon” href=”images/icon.ico” /> |
| 7 | </head> |
| 8 | <body> |
| 9 | </body> |
| 10 | </html> |
Explanation
From the above code in my-page.html file, line 6 is where the icon is added using the code <link rel=”shortcut icon” href=”images/icon.ico” /> using the HTML link tag where attributes rel and href are supplied. The rel attribute specifies the relationship of the file being linked via the href attribute with the HTML file (web page). In this tutorial I have supplied the href attribute with images/icon.ico on assumption that you stored your icon file in the folder named images located in the same place as the page where you want to add the icon is located. So you can change path supplied to the href attribute to match with the path where your icon file is located just in case you saved it in a different location from the one used in this tutorial.
Note
The code responsible for adding the icon to a page MUST always be inserted anywhere between the opening and closing head tag i.e. between <head> and </head>
- Previous Post: Linking A CSS File To An HTML File
- Next Post: Creating Lists In HTML