HTML Favicon
Working with Favicon
In this lesson, we will learn about the favicon and how to use them in HTML document.
What is Favicon in HTML
In HTML, a favicon, short for favourite icon, is a small graphic or icon that represents a website or webpage. It is typically displayed in the browser's address bar, tabs, bookmarks, or history menu. Favicon files are usually in the .ico format, but other image formats, such as .png or .gif, can also be used.
Supported Favicon Image Formats and its Media Types
The table below shows the image formats and their media types supported in HTML for favicon.
| Image Format | Media Type |
| ico | image/x-icon |
| png | image/png |
| jpg | image/jpeg |
| gif | image/gif |
Creating a Favicon
There are a few considerations to keep in mind to create a favicon. Firstly, you must determine your favicon's image size and format. Favicons are commonly created as 16x16 pixels or 32x32 pixels or 48x48 pixels square images. PNG, JPG, GIF, and ICO (icon) formats are widely supported for favicons. Once you have chosen the size and format, you can design the favicon.
When designing a favicon, simplicity is vital. Remember that the icon will appear small, so the details you will put in the image must be clearly visible. Use clean lines, bold colors, and recognizable shapes to represent your brand or website identity effectively.
Adding Favicon to HTML
To add a favicon to an HTML document, you need to include a link element within the head section of the HTML code. Here's an example:
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Favicon Example</title>
<link rel="icon" type="image/png" href="favicon.png">
</head>
<body>
<!-- Your webpage content goes here -->
</body>
</html>Output
In the above example, the rel="icon" attribute specifies that the linked file is the favicon for the webpage. The type attribute defines the media type of the file (in this case, it's a PNG image), and the href attribute specifies the path to the favicon file (in this case, "favicon.png" is in the same directory as the HTML file).
Click here to download the favicon image for practice purposes.
Adding Multiple Sizes Favicons to HTML
To add multiple sizes of favicons to an HTML document, you can use the <link> element with the rel="icon" attribute and the sizes attribute. The sizes attribute allows you to specify different sizes for the favicon image, enabling the browser to choose the most appropriate size to display based on the device or context.
Here's an example of how you can include multiple sizes of favicons in your HTML code:
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Multiple Sizes Favicon Example</title>
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="64x64" href="favicon-64x64.png">
</head>
<body>
<!-- Your webpage content goes here -->
</body>
</html>
