HTML Basics

HTML Introduction HTML Basic HTML Comments HTML Tags/Elements HTML Attributes HTML Formatting HTML Block and Inline HTML Charsets HTML Classes HTML Colors HTML Div HTML Headings HTML Id HTML Iframes HTML Images HTML File Paths HTML Tables HTML Layout HTML Lists HTML Links <a> HTML Paragraphs HTML Quotations HTML JavaScript HTML Emojis HTML URL Encode HTML Entities HTML Computercode HTML Symbols HTML Styles

HTML Forms

HTML Forms HTML Form Elements HTML Form Attributes HTML Input Attributes HTML Input Regex HTML Input Form Attributes HTML Input Types

HTML SEO

HTML Head HTML Page Title HTML Responsive HTML Semantics HTML Favicon

HTML Graphics

HTML Canvas HTML SVG

HTML Media

HTML Media HTML Audio HTML Video

HTML Reference

a abbr acronym address applet area article aside audio b base basefont bdi bdo big blockquote body br button canvas caption center cite code col colgroup data datalist dd del details dfn dialog dir div dl DOCTYPE dt em embed fieldset figcaption figure font footer form frame frameset h1_-_h6 head header hgroup hr html i iframe img input ins kbd label legend li link main map mark menu meta meter nav noframes noscript object ol optgroup option output p param picture pre progress q rp rt ruby s samp script search section select small source span strike strong style sub summary sup svg table tbody td template textarea tfoot th thead time title tr track tt u ul var video wbr

How to Use and Implement a Favicon in a Webpage

A favicon (short for "favorite icon") is a small icon associated with a website, typically displayed in the browser tab, bookmarks, and address bar. Implementing a favicon is simple and adds a professional touch to your website.

Steps to Implement a Favicon

1. Create or Download a Favicon

The first step is to create or download an image to use as your favicon. The most common file types for favicons are:

The recommended size for favicons is 16x16 pixels or 32x32 pixels for higher resolutions.

Remember to create a image that goes well on dark mode browser as well as light mode
Favicon dark mode

2. Place the Favicon in Your Website's Root Directory

Save your favicon file in your website's root directory, typically where your index.html file is located. You can also store it in a separate folder, such as /images.

3. Add the Favicon to Your HTML File

To link the favicon to your webpage, you need to add a <link> tag inside the <head> section of your HTML file. Here’s the syntax:

<link rel="icon" type="image/png" href="favicon.png">

In this example, the favicon is a .png file located in the same directory as your HTML file.

4. Specify Multiple Icon Formats (Optional)

For better compatibility across different devices and platforms, you may want to provide multiple formats of the favicon, such as .ico and .png. Here’s how you can specify different formats:

<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/png" href="favicon.png">

Browsers will use the first supported format they find.

5. Test the Favicon

Once you’ve implemented the favicon, test it by loading your website in different browsers and devices to ensure it displays correctly.

Example: Adding a Favicon to a Webpage

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Favicon Example</title>
    <!-- Favicon Link -->
    <link rel="icon" type="image/png" href="favicon.png">
</head>
<body>

    <h1>Welcome to My Website!</h1>
    <p>This is an example of a webpage with a favicon implemented.</p>

</body>
</html>

Conclusion

Adding a favicon to your website enhances its branding and professionalism. Just follow these simple steps: create or download a favicon, place it in your website's directory, and link it using the <link> tag in your HTML file.