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:
- 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.
- The browser identifies and displays the favicon automatically.
- If the favicon is in a different format (for example, jpg, BMP, gif, or png):
- 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.
-
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
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.