To include a favicon in an HTML document that appears before the page title in the browser, the following steps should be followed to seamlessly integrate a favicon.
Step 1: To begin, the first task is to generate a favicon that will be included in the Html file. By utilizing the provided https://www.favicon.cc/ reference, we can create the desired favicon.
Step 2: Once the favicon retrieval is successful, proceed to download it by selecting the option to download the favicon.
Step 3: Next, proceed by duplicating the downloaded favicon image and storing it in the same directory where the HTML file is located.
Step 4: Next, it is necessary to input the HTML code into a text editor or access the current HTML file in the preferred text editor to incorporate a favicon.
<!Doctype Html>
<Html>
<Head>
<Title>
Code for adding a favicon
</Title>
</Head>
<Body>
Hello User! <br>
</Body>
</Html>
Step 5: To proceed, position the cursor inside the head element of the HTML file. Next, after the closure of the title element, define the <link> element as illustrated in the code snippet below. Subsequently, incorporate the properties of the link element within the <link> element.
<Head>
<Title>
Code for adding a favicon
</Title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</Head>
Step 6: Finally, it is necessary to save the HTML document and proceed with its execution.
<!Doctype Html>
<Html>
<Head>
<Title>
Code for adding a favicon
</Title>
<link rel="shortcut icon" href="faviconJTP.ico" type="image/x-icon">
</Head>
<Body>
Hello User! <br>
</Body>
</Html>
The image below displays the result generated by the HTML code above: