HTML Favicon


What is a favicon?

A favicon is something that we all see on a regular basis when exploring the web, yet many of us don't notice or value it. A favicon is also known as a favourite icon (thus the abbreviation favicon), a shortcut icon, a tab icon, a website icon, or a bookmark icon. It is the little graphic we see on a tab or while bookmarking a page.


Types of favicons

Favicons come in a variety of sizes, including 1616, 3232, 4848, and 6464 pixels. They can also have an 8-bit, 24-bit, or 32-bit colour depth.


How should a favicon be used?

  • A favicon can be used in two ways: If the favicon is in.ico format, do the following:
  1. Upload the appropriately formatted favicon.ico file to the server's host directory, where the website files are stored. This is usually public_html, although it might vary based on the settings or hosting provider.
  2. The browser identifies and displays the favicon automatically.
  • If the favicon is in a different format (for example, jpg, BMP, gif, or png):
  1. Move the file to the server's host directory, which contains the website files. This is usually public_html, although it might vary based on the settings or hosting provider.
  2. We must now specify the picture we want to use as our website's favicon. To do this, we must include the following code inside the tags below the <title> in our website code:

Syntax

Example

Preview

What Should be the size of Favicon in HTML?

The size attribute of the favicon does not support most browsers.

Security flaws: Because many online browsers show favicons on the left side of the address bar, they are frequently utilized in phishing attacks on HTTPS pages. To deceive users, the attacker changes the site's favicon to the familiar padlock symbol (indicating an encrypted connection). To get around this, many popular and recent web browsers show the favicon solely in the tab and the security status of the protocol used to visit the website alongside the URL.

Size Name Purpose
32×32 favicon-32.png Standard for most desktop browsers.
57×57 favicon-57.png Standard iOS home screen.
76×76 favicon-76.png iPad home screen icon.
96×96 favicon-96.png Google TV icon.
120×120 favicon-120.png iPhone retina touch icon.
128×128 favicon-128.png Chrome Web Store icon & Small Windows 8 Start Screen Icon*.
144×144 favicon-144.png Internet Explorer 10 Metro tile for pinned site*
152×152 favicon-152.png iPad touch icon.
167×167 favicon-167.png iPad Retina touch icon (change for iOS 10: up from 152×152, not in action. iOS 10 will use 152×152)
180×180 favicon-180.png iPhone 6 plus
192×192 favicon-192.png Google Developer Web App Manifest Recommendation
195×195 favicon-195.png Opera Speed Dial icon (Not working in Opera 15 and later)
196×196 favicon-196.png Chrome for Android home screen icon
228×228 favicon-228.png Opera Coast icon

FAQs

Several file formats are supported for favicons, including ICO, PNG, GIF, and JPEG. However, ICO is the most widely used format for favicons. It is recommended to use a square image with a minimum size of 512x512 pixels to ensure the best quality on high-resolution displays. Additionally, it's important to ensure that the favicon file is named "favicon" and has the appropriate file extension for the desired format, such as .ico or .png.

An icon is a pictorial representation of files and programs on a computer or a person/thing that is the best example of a particular profession or act, while a favicon is an icon associated with a particular website, usually displayed in the address bar of a web browser when viewing the site.

The purpose of favicon is to make it easier for users to recognize and remember a site, and it adds to branding consistency. They are used in browser tabs, browser history, and more.