What is Favicon?

A favicon which is a abbreviation of the word favourite icon, is a file containing one or more small icons connected with a certain website or web page. It is also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon.

A web designer can build such an icon and upload it to a website (or web page) in a variety of ways, after which graphical web browsers will use it.

A page's favicon is normally displayed in the browser's address bar (and sometimes in the history) and next to the page's name in a list of bookmarks in browsers that support favicons.

A page's favicon is typically shown next to the page's title on a tabbed document interface, and site-specific browsers use the favicon as a desktop icon.

The History of Favicon

In March 1999, Microsoft introduced Internet Explorer 5, the first browser to enable favicons. Originally the favicon is a file called favicon.ico that was placed in the root directory of a website.

Internet Explorer, on the other hand, is unable to view files provided with this standardized MIME type when utilizing the.ico format to display as pictures (rather than as favicons).

The HTML living standard said in 2011 that "shortcut" is allowed directly before "icon" for historical reasons; nonetheless, "shortcut" has no significance in this context.

Legacy

Only the ICO file format is supported by Internet Explorer 5-10. Netscape 7 and Internet Explorer 5 and 6 only show the favicon when the page is bookmarked, not when the page is viewed, as later browsers do.

The devices that support the favicon.

By clicking the Add to Home Screen option within the share sheet in Safari, users can submit a custom icon that they can display on their home screens for Apple devices running iOS 1.1.3 or later, as well as select Android smartphones.

Providing a link rel="apple-touch-icon"...> in the head> section of documents supplied by the website enables this feature.

This icon's recommended basic size is 152152 pixels.

The standard dimension for the iPad is 180x180 pixels. A 192x192 PNG icon is preferred by Android tablets [through Chrome].

Apple-touch-icon icon's file has been changed to include rounded corners. A drop shadow and reflected shine were included in iOS versions previous to iOS 7, and an apple-touch-icon-precomposed icon was supplied to advise devices not to apply reflective shine to the picture.

Limitations and criticism

The favicon can cause unnecessarily delayed page load times and superfluous 404 entries in the server log if it is missing, due to the need to check for it at a fixed spot.

Favicons are frequently used in phishing and eavesdropping attacks against HTTPS websites. Many web browsers show favicons in portions of the user interface, such as the address bar, to indicate if the connection to a website is secure, such as TLS.

While in an attack, an attacker can fool the user and make him think that they are securely connected to the correct website which they wanted to access, simply by altering the favicon into a familiar padlock image.

This technique is used by automated man-in-the-middle attack programs like SSLStrip.

Because favicons are normally found at the root of a server's site directory, they can be used to reliably reveal if a web client is logged into a specific service.

The favicon can be used in a way to track the browser as well, this point was significantly proved by the researchers at the University of Illinois in 2021.

Software Requirements

Simply go to the page for Free Resource Editors and Icon Editors and download one. A few free icon and resource editors are listed on the page. Here we can simply choose any of the icon and download it easily.

There can be a possibility that we might alternatively download a package that includes a resource editor as well. Programmers use resource editors to generate and edit Windows's "resources" like as icons, cursors (mouse pointers), menus, dialog boxes, and so on. We will just need to use the icon editor component of such resource editors for our purposes.

How to Create a "Favicon.ico" File

1. Make an image with a 16X16 pixel size. Yes, it's quite little, and we can't do much with it. We need also limit ourself to the Windows 16 color palette, however I believe 256 colors would enough.
2. We can also make a 32X32 pixel icon that will be adjusted to fit the Favorites menu and location bar if desired. We can also use the same icon file to store both 16X16 and 32X32 pixel icons.
3. Make an ICO file out of the image (named "favicon.ico", of course).
4. Put it up on our website. We can alternatively save it to our pictures directory, but this will require us to make changes to our web pages.

Help! ICO Files Aren't Accepted by My Web Host!

If we're using a free web server that doesn't let us to upload files with the.ICO extension, we can try uploading it (in binary mode) with another extension (like GIF). Once it's on our site, use our FTP tool to rename it to the correct extension.

In the preceding example, replace "/favicon.ico" with the real location of our favicon.ico file, such as "/images/favicon.ico" if it is in our "/images/" directory.

If we have placed our "favicon.ico" file in the legacy locations or the place where it is by default, or in the root directory of our website, then we can skip this step. Otherwise, we'll have to change all of our existing web pages to use the "favicon.ico" feature.

Who have bookmarked my website?

This "favicon.ico" had an interesting side effect in the past. It is not mandatory that we have used the favicon in our website, the error or side effect will still take place.

Because the IE 5 request the server to check the server logs that which websites has the favicon installed in it.

Using this formula, we can estimate the total number of users that bookmark our site based on the number of favicon.ico requests: IE 5 bookmarks divided by the percentage of our visitors who use IE 5.

However, by the development and the upgradation of the technology, this side effect is no longer in benificial.

While using the Internet Explorer, if one sees the older version of the favicon, then we need to clear the cache.

Because the favicon.ico file is cached in Internet Explorer's "Temporary Internet Files" folder, if we don't clear the cache, we'll likely see our old version rather than the new one we've produced. This also implies that if our visitors clear their cache, their copy of the favicon.ico file connected with our site's bookmark will be deleted as well.

There will be times when it displays our site's favicon and times when it does not.

Don't get too worked up over it. If we want to be sure our favicon is working properly, test it in several browsers.

Whether or not a site's favicon appears in Internet Explorer depends on so many variables, in my experience, that it's better treated as a random event. There's no point in stressing over this because it applies to both we and our site's viewers.

Conclusion

The "favicon.ico" feature is not required for the operation of our website. In fact, few people are aware of its existence, and it is far too small to accommodate anything meaningful.

Perhaps more crucially, designing such an icon elevates the professionalism of our site by identifying us as a detail-oriented web designer.