Skip to main content
Practice

Favicon

A Favicon is a small image that represents a website, which is displayed in the web browser’s tab.

favicon.png

Why Use a Favicon​

  • User Convenience: When users have multiple tabs open, favicons allow them to easily recognize your website.

  • Branding: A unique icon can emphasize your website's brand or identity.


How to Add a Favicon​

A favicon is defined in the <head> section of an HTML document using the <link> tag that specifies an external resource.

While files with the .ico extension are commonly used, other image formats such as .png and .jpg can also be used.


Favicon Code Example
<head>
  <link rel="icon" href="path/to/favicon.ico" type="image/x-icon" />
</head>

  • The rel attribute defines the relationship between the current document and the external resource. icon indicates that the external resource is an icon for the current document.

  • The href attribute specifies the URL of the external resource (icon image).

  • The type attribute specifies the media type of the external resource, such as image/x-icon. Since favicons mostly use the .ico extension, image/x-icon is used.


Using Multiple Sizes of Favicons​

There are instances where you need to provide favicons in various sizes to accommodate different devices or situations.

In such cases, you can use multiple <link> tags to specify each icon.


Code Example​

Setting Multiple Favicon Sizes
<head>
  <link rel="icon" sizes="16x16" href="path/to/favicon-16x16.png" />
  <link rel="icon" sizes="32x32" href="path/to/favicon-32x32.png" />
  <link
    rel="apple-touch-icon"
    sizes="180x180"
    href="path/to/apple-touch-icon-180x180.png"
  />
</head>

With this setup, the browser will select the icon size that is most appropriate for the screen size.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.