In this blog we are going to learn about adding a logo to our address bar.
Professional Websites are very structured. Before we start with this tutorial we are going to create a folder structure of our website.
Method 1
- Create a folder anywhere on your computer(name it mywebpage).This folder is our websites root folder
- Open that folder copy and paste your icon image in this folder. N.b.: Standard size for icons is 16px by 16 px.
- Open a new Notepad and save the notepade with the file name "web.html" in your root folder.
- Type this code in your notepad
<html>
<head>
<link rel="SHORTCUT ICON" href="logo.ico" />
<title>
Welcome to my page
</title>
</head>
<body>
This page adds puts my logo in the address bar
</body>
Code Description
The third line in your code, is the code that adds your logo to your address bar.
- We are using the link tag because we are calling an external file(logo.ico) to our page.Watch the extension of your image,Mine is .jpg. There are other image extensions (.gif,.bmp,jpg etc).Best pratice we use .ico.
- The rel attribute shows the kind of file you are attaching.
- The href(Hypertext Reference is used to show the path to pick the external file (image.jpg)