Skip to main content
Crowdfunding
Python + AI for Geeks
Practice

Favicon

A favicon is a small icon representing a website, displayed in the tab of a web browser.

favicon.png

Why Use a Favicon?​

A favicon gives your website a more professional look. Here are some reasons why using a favicon is beneficial:

  • User Convenience: When users open multiple tabs, favicons make it easier to recognize and navigate back to a specific website.

  • Branding: A unique icon can emphasize the brand or identity of the website.


How to Add a Favicon​

A favicon is defined in an HTML document using a <link> tag in the <head> section to identify it as an external resource.

While files with a .ico extension are commonly used, other image formats like .png or .jpg can also be utilized.


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 resource is the icon for the document.

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

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


Using Favicons of Different Sizes​

There are instances where you need to provide multiple sizes of favicons to accommodate different devices or scenarios.

In such cases, multiple <link> tags can be used to specify each icon.


Example of Favicon with Different 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 best fits the display.

Want to learn more?

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