HTML Favicons

❮ Prev Next ❯

A favicon is a small icon that appears in the browser tab next to the page title. It is also commonly displayed in bookmarks and history lists. Here's how to create a favicon:

You can use any image you like as your favicon. or You can also create your own favicon on this sites https://www.favicon.cc

  • Create an image file that is 16x16 pixels or 32x32 pixels in size. You can use an image editing software like Adobe Photoshop or GIMP to create the image.
  • Save the image in the.icoformat. You can use an online converter or an image editing software to save the file in this format.
  • Upload the .ico file to the root directory of your website.
  • Add the following code to the head section of your HTML file: 
<link rel="icon"  type="image/x-icon"  href="favicon.ico"/>

The "rel" attribute specifies the relationship between the current document and the favicon file. The "type" attribute specifies the file type, which is"image/x-icon" for favicon files. The "href" attribute specifies the URL or path to the favicon file.

Here's an example of how the code would look in context:

Example 

<!DOCTYPE HTML>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
      <link rel="icon" type="image/x-icon" href="favicon.ico">
    </head>
    <body>
      <h1>Check the browser tab to see the change</h1>
    </body>
</html>

Note that some browsers may not support the .icon format or may prefer a different size for the favicon. In this case, you can provide multiple favicon files in different formats and sizes, and the browser will automatically choose the best one to display. You can do this using the "sizes" attribute in the link tag, like this:

Example 

<!DOCTYPE HTML>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
      <link rel="icon" sizes="32x32" type="image/x-icon" href="favicon.ico">
      <link rel="icon" sizes="16x16" type="image/x-icon" href="favicon.ico">
      <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    </head>
    <body>
      <h1>Check the browser tab to see the change</h1>
    </body>
</html>

In this example, we provide two PNG files with different sizes and a fallback ICO file for older browsers.

Now that we have see how Favicons works, lets see Page Title in the next chapter.

❮ Prev Next ❯