A favicon is a little graphic that appears in the browser tab next to the
page title.

How to Add an HTML Favicon 



Your favicon can be whatever image you like. On websites like
https://www.favicon.cc, you may even make your own favicon.


A favicon is a little graphic, thus it should be straightforward and have
a lot of contrast.

In the browser tab, a favicon icon is seen to the left of the page title.


To add a favicon to your website, save the image either in the root
directory of your web server or in a new folder named pictures that you
create in the root directory. “favicon.ico” is a typical name for a
favicon image.


After the <title> element, add
a <link> element to your “index.html” file as follows:


Example:

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <link rel=“icon” type=“image/x-icon” href=“/image/favicon.ico”>
</head>
<body>

   <h1>This is a Heading</h1>
   <p>This is a paragraph.</p>

</body>
</html>



Favicon in HTML




The “index.html” file should now be saved and reloaded in your browser.
Your favicon image should now appear to the left of the page title in your
browser tab.


Use the HTML <link> element to
insert a favicon for this chapter.





Rate this post

Categorized in: