Learn HTML

"Are you looking to learn HTML from scratch? Look no further! Our HTML course is designed for both beginners and advanced learners who want to master the fundamental concepts of HTML. Our comprehensive course covers everything from the basic concepts of HTML, including tags, attributes, and elements, to the more advanced concepts such as multimedia, responsive design, and accessibility."

HTML Chapters Menu

HTML Favicon

A favicon (short for "favorite icon") is a small icon or image that appears in the browser tab next to the page title. It can help users to quickly identify your website and distinguish it from other open tabs. 

It is typically displayed in the browser's address bar, tabs, bookmarks, and sometimes in search results or social media previews. Favicon.ico is the traditional file format for favicons, but other image formats can also be used.

Here's an overview of how to add a favicon to your HTML document:

  • Create your favicon: First, you'll need to create a small square icon image, preferably 16x16 pixels or 32x32 pixels in size. Save it in the .ico format for maximum compatibility, or you can use other image formats like .png or .jpg if you prefer. You can use following site to generate favicon and manifest file in different sizes: favicon.io
  • Save the favicon file: Save your favicon file with the name "favicon.ico" in the root directory of your website. This is the default location where browsers look for favicons.
  • Add the favicon link in the HTML head: Open your HTML file, and within the <head> section, add the following line of code:

 

Syntax

To add a favicon to your HTML document, you need to include a link element in the head section of the document, with the following attributes:

  • rel: specifies the relationship between the document and the linked resource. Use icon to indicate that the linked resource is a favicon.
  • type: specifies the MIME type of the linked resource. For favicons, use "image/png" or "image/x-icon".
  • href: specifies the URL of the linked resource. This should point to the location of the favicon file on your web server.
<head>
  <!-- Other meta tags and links may be present here -->
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

In this example, the link element specifies that the linked resource is a favicon, with the MIME type of "image/x-icon", and with the URL of "favicon.ico". This assumes that there is a file named “favicon.ico” in the root directory of your web server.

If your favicon is in a different format (e.g., .png), you can specify the correct MIME type in the type attribute like this:

<head>
  <!-- Other meta tags and links may be present here -->
  <link rel="icon" type="image/png" href="favicon.png">
</head>

 

Example

Here is the example of favicon icon on browser tab. 

 

File Format

Favicons can be in various image file formats, such as “.ico”, “.png”, “.gif”, or “.jpg”. The most commonly used file format for favicons is “.ico”, which is a Windows icon file format. However, modern browsers also support other file formats such as “.png” and “.svg”. When creating a favicon, make sure to choose a file format that is supported by all major browsers.

 

Size and Resolution

Favicons should be small in size and have a square aspect ratio, typically between 16x16 pixels and 32x32 pixels. However, some browsers may support larger or smaller sizes, so it's a good idea to provide multiple sizes of the favicon to ensure compatibility across different devices and browsers. You can do this by including multiple link tags in the head section, like this:


<head>
 <link rel="icon" href="favicon-16x16.png" sizes="16x16">
 <link rel="icon" href="favicon-32x32.png" sizes="32x32">
 <link rel="icon" href="favicon-48x48.png" sizes="48x48">
 <title>My Webpage</title>
</head>


In this example, three different sizes of the favicon are provided, each with a different file name and size specified in the “href” attribute, and the “size” of each favicon is specified in the sizes attribute.

 

Points to Remember

  1. Keep in mind that browsers may cache the favicon, so if you've updated your favicon, it might take some time for the new one to appear. To see immediate changes clear your browser cache or open your website in an incognito/private window to see the new favicon.
  2. If you don't have a favicon specified, most modern browsers will automatically look for a file named "favicon.ico" in the root directory of your website and use that as the default favicon.
  3. Additionally, some platforms (like iOS) have their own specific requirements for displaying favicons, so consider testing your favicon on different devices and browsers to ensure it looks good in all scenarios.

Overall, adding a favicon to your HTML document is a small but important step in improving the user experience of your website. It can help users to quickly identify your website and improve the overall look and feel of your web pages.

 

Watch this Chapter Video on YouTube: