Skip to main content

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 the rel 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​

BrowserFavicon SupportNotes
ChromeYesSupports .ico, .png, and .gif formats
FirefoxYesSupports .ico, .png, and .gif formats
SafariYesSupports .ico, .png, and .gif formats
EdgeYesSupports .ico, .png, and .gif formats
Internet ExplorerPartialSupports only .ico format, and may not display larger icon sizes correctly
OperaYesSupports .ico, .png, and .gif formats
Mobile BrowsersYesMost 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.