HTML Favicon

❮ Previous Next ❯

You must have noticed a small icon to the left of the page title on the web browser tab. This small image is called a favicon.

It is a short name for 'favourite icon'.

The below image shows a favicon in the browser tab.

The favicon image is also shown on the address bar and bookmark bar.

If you check the browser history, it also displays page titles with favicon images.

Favicon Size

The 16x16 pixels size is the most common favicon size. You can also use a 32x32 pixel size favicon image.

As the 32x32 pixel favicon dimension is large, it has better clarity than the 16x16 pixel favicon image.

Favicon File Type

For the favicon image, we generally use the ICO file format. But browsers today also support PNG, JPEG, GIF and SVG file types.

There is no fixed rule', but the best practice is to name the image file as 'favicon'. For example: 'favicon.ico'.

How to create a favicon image?

A favicon is an image that users notice. These days search engines like Google, Bing etc., have also started to show favicon in search results.

There is a high chance that people will click on your website if you have an appealing favicon.

Also, we should take utmost care in creating our favicon because that may create brand awareness.

You can use your brand logo as a favicon image.

Use the below favicon generator to create a 16x16 or 32x32 ICO favicon image.

Select your image file. Choose the size and hit the 'Generate Favicon' button.

Once the favicon is generated, you will get a download link.

Favicon Generator

Add a Favicon in HTML

There are two ways we can add a favicon to our page.

The first is to name the file 'favicon.ico' and save it in the website root directory.

Web browsers automatically look for this file in the root, and when they find it, they start displaying it.

The second method is to save the favicon in any folder and use the HTML <link> tag to include it in the HTML file.

HTML Code

It is important to note that the above code will be added in the <head> section after the <title> element. See the complete example.

Example

<!DOCTYPE html>

<html>

<head>

<title>HTML Favicon Example</title>

<link rel="icon" type="image/x-icon" href="/folder/favicon.ico">

</head>

<body>

<h1>Add HTML Favicon</h1>

<p>See the browser tab. You will notice a favicon image beside the title.</p>

</body>

</html>

If you want to test your favicon, copy the code above and save it as 'index.html'. Replace the ''folder' word in the code with your folder name.

Open this file with your favourite browser. Now you should be able to see your favicon image on the browser tab.

❮ Previous Next ❯

1. HTML Tutorial

2. Introduction to HTML

5. Web Browser