Updated June 20, 2023

Introduction to HTML Favicon

Favicon is the short form of a favorites icon, also termed a bookmark icon can be defined as a small logo with a .ico file extension, not with any other .bmp or .gif file usually seen in the address bar with a personalized image of the frequently visited URL, helps to an advertisement, promote or made as a standard trademark, meanwhile plays an essential aspect in the website like google, Facebook where we have noted a small logo in the left side of the address bar which gives a professional look as well as appears in the users favorites bookmarks and also without favicon icon the website remains generic web page icon and favors as the shortcut from the favorite’s icon.

The sample real-time example is shown below. Clicking favorites in the bookmark show typical icons. Even some Web services using XML and search engines use the favicon for their uniqueness.

Syntax:

The primary meta tag is given below to link to the web page.

<link rel="icon" href="image path"  type="image/icon type">

In the above syntax, you replace the image path with the actual location of the favicon.ico, which you might place in an image directory. The last value type is a MIME format file. You can use any type of image here, but we consider the GIF format more advanced.

How to Create HTML Favicon?

A web designer creates their personalized icon and associates them with the web page. Browsers that support a favicon display it in their particular address bars, achieving this through two means. Secondly, it displays with the tabbed document interface in the next link. Even when selected from their hard drive, the favicon must, most importantly, use the (.ico) file format. There are a few free services that can convert the image.

Once a developer completes the design of a website, they add a favicon. Simply it replaces a blank document icon on the browser tab with an official web page icon. This enables a user to make a website more accessible or find a more accessible website. The most popular search engine, Google, impresses or identifies with the user through its logo theme. As the icon is too small, it should be clear for the user to understand. There are different methods to create a Favicon. Method 1 – automatic generation using File Manager, Method -2: Uploading a regular image.

Steps to create favicon.ico. It’s a straightforward landing process:

Generating an image with a size of 16 x 16 pixels (Recognition of an image). Here, you can resize the image to make it tiny for use as a favicon.
Make a conversion to a favicon.ico file format for the browser’s understanding.
Uploading a generated icon into the website.
The next step is adding the code to HTML. You can even use a favicon as a desktop or Apple icon.

How to Insert Favicon in HTML File?

You can also create the favicon with a transparent background, using either .gif or .png format. The question may arise why do we need a favicon? The answer is very simple: branding and marketing our website worldwide. The little icon makes a web page a little more professional. You add the favicon to an HTML file, which must have a particular characteristic. You can add or change the favicon on the website at any time.

Standard Name with a File Format: Once an image is created and named, the default has a favicon.ico (ICO files done with X-ICON Editor).
Size of an Image File:16 * 16, 64 * 64, 128 * 128 pixels, and files should not exceed 100KB.
Colour: maybe 8 bites, 24 or 32 bites
Image: Should be in gif or png format.

The favicon is placed between the <head> element and replaces an image location. It uses a link tag that defines a link to the file. It makes use of two attributes, rel and href. We can use Photoshop with plugins and other online generators to convert an image file to .ico format.

Icon Location path: It’s a standard implementation.

<link rel=" icon" ……….../>      // It installs variety of icons.
<link rel =" Shortcut icon" href=……….../>   // here in the link attribute shortcut installs its own address bar icon.

The next code is used for IOS users:

<link rel =" apple-touch -icon" sizes ="180 x 180  href=……….../>

Below is an example of a code we can use in HTML code.

Example:

<!-- HTML code demo to display an icon in an address bar-->
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<title>
EDUCBA  icon
</title>
<link rel = "icon" href =https://favi.png  type = "image/x-icon">
</head>
<body>
<h1 style = "color:blue;">
EDUCBA Icon
</h1>
<p>
Icon is added to the address bar
</p>
</body>
</html>

Output:

Code Explanation: I have created a small oval icon in the above code and converted it into a favicon. We note that an icon displays in Internet Explorer, but many browsers do not support it. IE takes the icon from the root directory. The HTML file displays a 404 error from the server response if no specified path exists. You’ll likely need to empty your website’s cache to update the favicon since web browsers persistently hold onto cached favicons.

Note: Although with the successful completion of the favicon creation, it is not visible in all the browser tabs. The good compatibility is with Internet Explorer 5.0+ and Netscape 7.0 +. Most modern browsers support different graphical formats as their favicon. The problem arises when a server is not well configured: It is necessary to create the root has type= “image/x-icon .ico format.

Conclusion

Coming to the end, the favicon logo plays a vital role in website development, and also, we have seen various methods in creating a favicon, thereby achieving compatibility in cross-browser. This icon helps in creating a visual specification with the domain name. Adding them to the website is easy as they guide site recognition and branding and support the web designer to mark their professionalism.