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 therel
attribute is set to"icon"
to indicate that the linked file is a favicon. - The
href
attribute specifies the path to the favicon file, which is"favicon.ico"
in this case. - The
type
attribute 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.