lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

webIntroHtmlChapter4Title

lesson12Title

webIntroHtmlChapter1Title

webIntroHtmlChapter2Title

webIntroHtmlChapter3Title

# Favicon

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

<img
 src="https://assets.codefriends.net/docs/web/intro/html/favicon.png"
 alt="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.

 

```html title="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.

 

```html title="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.

A favicon is an icon for a website, which can be added using the `<link>` tag in the `<head>` section of an HTML document. The `<head>` section includes elements related to the page's metadata.