Favicons (short for "favorite icons") are small, typically 16x16 pixel icons associated with a website. They are displayed in the address bar of a web browser and next to the page's name in a list of bookmarks or favorites.
To add a favicon to your HTML document, you need to include a link to the icon file in the head section of your HTML. Here's an example:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Add a link to your favicon --> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <title>Your Website Title</title> </head> <body> <!-- Your website content goes here --> </body> </html>
In this example, replace "favicon.ico" with the actual path to your favicon file. The `rel="icon"` and `rel="shortcut icon"` attributes are used to define the relationship between the HTML document and the favicon file. The "image/x-icon" type attribute specifies that the file is an icon.
You can use other image formats for your favicon, such as PNG or GIF, but ICO (Icon) format is widely supported. Make sure your favicon file is accessible and properly located on your web server.
Additionally, you might want to create different sizes of the favicon to ensure compatibility with various devices and browsers. You can do this by providing multiple `<link>` elements with different `rel` attributes and sizes, like so:
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
Remember to replace the file names and paths with your actual favicon files.