Broad Network


How To Add a Favicon in HTML

Icons and Menus

How To, for Web Applications

By: Chrysanthus Date Published: 1 Mar 2025

A favicon is a small sized logo, for the Website, displayed next to (in front of) the web page title, in the browser tab. In this situation, the logo is a small image. This tutorial explains how to achieve that.

A Simple Webpage Code

The following is a simple web page code with a favicon:

    <!DOCTYPE html>
    <html>
    <head>
        <title>How To, for Web Applications</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Short description of the Web Page.">
        <link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
        <style>
        </style>
        <script type="text/javascript">
        </script>
    </head>
    
    <body>
        <div>
            <p> some text, images, videos, forms, etc.</p>
        </div>
    </body>
    </html>

This page code has the following HTML elements in the HTML head element: title tag, meta-viewport tag, meta-description tag, favicon link tag, style element that is empty, and JavaScript element that is also empty. All the web pages of the website should have at least these elements in the head element.

Every web page must have the title tag. The content of the title tag is what appears, next to the favicon, as the web page title, in the browser tab. It is advisable to always have the favicon for all pages of the website. It gives the website a professional look.

The second HTML element (in the head element) is the meta viewport element. This element must be in every web page that has to be responsive. A responsive webpage is a webpage that will appear nice in most device screens.

The third HTML element (in the head element) is the meta description element. This element should be in every web page of the website. If this webpage is found by a search engine, the title of the page will be displayed, and the value of the element's content attribute, will be displayed just below the title.

The next HTML element in the HTML head element, is the element of interest; it is for the favicon. It is a link element. Do not confuse between the link element and the hyperlink element. The hyperlink element is actually an anchor element, such that when clicked, a new webpage will appear at the browser. On the other hand, the link element cannot be clicked or seen when the page is displayed at the browser.

This link element must have the attribute, " rel='icon' " . This is to indicate that the image is small and should be considered as an icon.

This link element must also have the attribute, " 'https://www.examplee.com/images/logo.jpg' ". This is the href attribute. Its value is the path to the image. The name of the image here is logo.jpg . Replace the path, 'https://www.examplee.com/images/logo.jpg' with the path to the logo image of the organization or business website.

Still, this link element must also have the attribute, " type='image/x-icon' " . This indicates the type of information (type of data).

And so it is: That is how to have a favicon in a webpage. It is expected that the reader understands the rest of the code in the whole HTML code above. In particular, it is expected that the reader understands, the role of the HTML body element and how it should be coded.

Thanks for reading.

Chrys





Related Links:

More Related Links:

Cousins

Menus

How to Create a Menu Icon with HTML and CSS and without using a Library
How To Create a Top Navigation Bar
How to Create Fixed Auto Height Sidebar Menu with CSS
How to Create a Horizontal Tabs Bar with their Sections using CSS and JavaScript
How to Create a Search Menu to Filter List Items, using CSS and JavaScript
How To Create a Responsive Top Navigation Bar with Left-aligned and Right-aligned Hyperlinks
How to Create a Top Fixed Horizontal Menu with CSS
How to Create a Vertical Navigation Menu for Smartphones and Tablets Using CSS and JavaScript
How to Create a Slide Down Full Screen Curtain Navigation Menu
How To Create a Responsive Collapsible Sidebar Menu
How to Create Pagination of Numbers with Borders
How to Create a Narrow Sticky Vertical Sidebar for Different Social Media Icons
How to Create a Vertical HTML Button Group with CSS
How To Create a Breadcrumb Navigation Menu
How to Create a Hover-able Dropup Menu with CSS Only
How to Create a Clickable Dropdown Menu with CSS and JavaScript
How to Create a Clickable Dropdown Menu inside a Responsive Navigation Sidebar with CSS and JavaScript
How to Create a Hover-able Dropdown Menu inside a Responsive Horizontal Navigation Bar with CSS and JavaScript
How to Create a Clickable Dropdown Broad Menu inside a Horizontal Navigation Bar using CSS and JavaScript

Images

Coming soon . . .

Buttons

Coming soon . . .

Forms

Coming soon . . .

Filters

Coming soon . . .

Tables

Coming soon . . .
BACK NEXT

Comments