HTML Favicon

A favicon (short for "favorite icon") is a small icon that is displayed in the browser's address bar or tab when a user visits a website. The favicon is typically used to help users identify a website more easily, and it can also help to brand a website.

Implementing a Favicon in HTML

To use a favicon in HTML, you can use the link element in the head of your HTML document. The link element should have a rel attribute with the value "icon" and a href attribute that points to the location of the favicon file. Here is an example:

<html>
<head>
  <link rel="icon" href="/path/to/favicon.ico">
</head>
<body>
  <!-- Your content goes here -->
  </body>
</html>

The favicon file should be a square image in .ico format, which is a widely supported format for favicons. You can also use .png or .gif format for the favicon, but be aware that some older browsers may not support these formats.

It's also a good idea to specify the dimensions of the favicon using the width and height attributes, like this:

<link rel="icon" href="/path/to/favicon.ico" width="16" height="16">

This helps the browser to display the favicon more efficiently.

Favicon Sizes

Favicons are typically displayed in the browser's address bar or tab, so their size depends on the size of the address bar or tab.

Here are some common favicon sizes that you might consider using for different devices:

  • 16x16 pixels: This is the most common size for favicons, and it is supported by all modern browsers. This size is suitable for use on desktop computers and laptops.
  • 32x32 pixels: Some newer devices, such as high-resolution displays and tablets, may benefit from a larger favicon size. A 32x32 pixel favicon can provide a more detailed and clearer image on these devices.
  • 48x48 pixels: This size is suitable for use on high-resolution displays and tablets, and it is supported by most modern browsers.
  • 64x64 pixels: This size is suitable for use on high-resolution displays and tablets, and it is supported by most modern browsers.

In addition to these sizes, you may also want to consider creating favicons in other sizes, such as 128x128 pixels or 256x256 pixels, for use on devices with even higher resolutions.

It's generally a good idea to create favicons in multiple sizes and to include them all in your HTML document using the link element, like this:

<link rel="icon" type="image/png" sizes="16x16" href="/path/to/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/path/to/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/path/to/favicon-48x48.png">
<link rel="icon" type="image/png" sizes="64x64" href="/path/to/favicon-64x64.png">

This allows the browser to choose the most appropriate size for the device, and it helps to ensure that the favicon looks good on a wide variety of devices.

HTML Basics