View video tutorial

HTML Favicon

HTML

Favicon is a small icon next to the title of a tab in the browser. A favicon or "favorite icon" is a small icon that represents a website and appears in various places in a web browser, such as browser tabs, bookmarks list, and address bar.

Favorite icon - Favicon


➔ Favicon is an image mostly in .ico extension but other format also work.

➔ It is very small image icon generally 16x16 pixels.

➔ Favicons are available for download from the web or can be created from online. Ex: favicon.cc

➔ To add a favicon to an HTML document, the <link> element is used within the <head> section of the HTML.

➔ This increases brand recognition and helps users quickly identify a website.

HTML facicon

Type the code a below, output should look like below.

vs code install

Try in your browser

Try the code below with an icon and open the file in a browser.

Example

<!DOCTYPE html>
<html>
<!-- Example: Try favicon in your browsers  -->
<head>
    <title>Page Title</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
    <h1>This is a Heading</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
        when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</body>
</html>
Try it Now »

Click on the "Try it Now" button to see how it works.