HTML Favicon | Learn How to Add a Favicon to Your Website
HTML Favicon
A favicon is a small icon or image that is displayed in the browser tab and bookmarks bar to represent a website.
In HTML, you can add a favicon to your website by including a link to the favicon file in the <head> section of your HTML document.
As an example:
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<title>My Website</title>
</head>
In this example:
- The
<link>tag is used to define the favicon, and therelattribute is set to"icon"to indicate that the linked file is a favicon. - The
hrefattribute specifies the path to the favicon file, which is"favicon.ico"in this case. - The
typeattribute specifies the file type of the favicon.
info
Note that the favicon file should be a 16x16 or 32x32 pixel image in .ico format. You can create a favicon image using an image editing software, or use a favicon generator tool available online.
Favicon Browser Support
| Browser | Favicon Support | Notes |
|---|---|---|
| Chrome | Yes | Supports .ico, .png, and .gif formats |
| Firefox | Yes | Supports .ico, .png, and .gif formats |
| Safari | Yes | Supports .ico, .png, and .gif formats |
| Edge | Yes | Supports .ico, .png, and .gif formats |
| Internet Explorer | Partial | Supports only .ico format, and may not display larger icon sizes correctly |
| Opera | Yes | Supports .ico, .png, and .gif formats |
| Mobile Browsers | Yes | Most mobile browsers support favicons, but some older devices may not display them correctly |
danger
Note that the level of support may vary depending on the specific version of the browser, operating system, and device. It's always a good idea to test your favicon on a variety of devices and browsers to ensure that it is displayed correctly.