How to Insert Tab Icon in HTML
-
Use
<link rel="icon">and a PNG Image to Add Favicon for Website in HTML -
Use
<link rel="icon">and a ICO Image to Add Favicon for Website in HTML
Tab icon is fundamentally a tiny icon that we see in the browser tab. It generally looks like a very small-sized image of the minimal size in pixels. It is also known as a favicon. This article will introduce methods to add a browser tab icon for a website in HTML.
Use <link rel="icon"> and a PNG Image to Add Favicon for Website in HTML
We can use the <link> tag and the rel="icon" attribute to add a browser favicon in HTML. The <link>tag in the code connects the current document to the external resource. It is the tag that is usually used to link to external style sheets. It is also called an empty element as it contains attributes only. The rel attribute is also used to define the relationship between current and a linked resource. We can set the destination of the image’s link to be used as a favicon in the href attribute. An image with .png extension should be used in the href attribute.
At first, you need to have the PNG image that you will use as your favicon on your device. It must be of tiny pixels. The most common size for creating a favicon is 16x16 pixels. Nevertheless, they can appear in a bit larger dimensions also (32x32). Now, inside the HTML <head> tag, open the <link> tag, and use the rel attribute inside it. Set the rel attribute to icon. After it, write the href attribute and specify the PNG image file that you want to use as your favicon inside the quotes. After this, close all the previously opened tags.
Here, we have used the image favicon.png as the favicon. The image is located in the local system. In this way, we can add a favicon to a webpage in HTML.
Example Code:
<head>
<link rel="icon" href="/img/DelftStack/favicon.png">
</head>
Use <link rel="icon"> and a ICO Image to Add Favicon for Website in HTML
We can use the ICO Image to add the favicon in a website in HTML for backward compatibility purposes. Almost all the modern browsers support the PNG image to be used as a favicon. For the browsers like IE10 and its previous versions, we can use ICO images. ICO images have .ico as the extension. We can use the tools like ConvertICO to convert the PNG images to ICO.
For example, browse the ConvertICO website and upload the favicon.png file. The website will convert the image into ICO format and lets us download it. Then, use the image path in the href attribute in the <link> tag as done in the first method. Then, we can see the favicon on the webpage.
Example Code:
<head>
<link rel="icon" href="/img/DelftStack/favicon.png">
</head>
Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.
LinkedIn