Previous

HTML: Favicon

A favicon is a small icon associated with a website that typically appears in the browser's address bar, tabs, bookmarks, and favorites lists. It's a way to visually represent a website and make it easily recognizable among a user's bookmarks or when multiple tabs are open in a browser.

To add a favicon to your HTML document, you can use the <link> element in the <head> section of your HTML code. Here's an example of how you can do it:

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


In this example:

  • <link rel="icon" type="image/png" href="favicon.png"> is the line that adds the favicon.
  • rel="icon" specifies the relationship between the current document and the favicon.
  • type="image/png" specifies the type of the favicon image. It can also be "image/x-icon" for .ico files.
  • href="favicon.png" is the path to your favicon file. Make sure to replace "favicon.png" with the actual path to your favicon image file.

You can create a favicon image using graphic design software like Adobe Photoshop, Illustrator, or online favicon generators. The standard size for a favicon is 16x16 pixels or 32x32 pixels, but modern browsers can support larger sizes as well.

Previous