Open-Source Internship opportunity by OpenGenus for programmers. Apply now.
In this article, we will explore the idea of favicons in HTML, syntax and how to add it to a webpage.
Contents
- Introduction
- Basic Syntax
- Attributes
- Examples
Introduction
A favicon is a small icon displayed left of the page title in a browser tab. It is loaded directly from the page requested, and is usually a logo representing the owner of the site. For example, the favicon of this site is the following image.
Any image format can be used for a favicon such as .jpeg, .png, or .svg. Usually we store it in a file called favicon.ico. This file can be placed anywhere in the project directory, but is usually kept in root or an images folder.
Basic Syntax
On the DOM, the favicon is usually rendered as a 16x16 pixel image. It can be placed along with your HTML metadata using a <link> tag.
<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
...
</head>
<body>
...
Attributes
Favicons require the following attributes to be specified in the link tag:
rel="icon": tells the DOM to use this image as a favicon.type="image/<file type>": specifies the filetype of the image used.href="<location>": specifies the location of the favicon image.- (optional)
sizes=16x16: specifies the size of the image used as a favicon, not supported in all modern browsers as most icons default to size 16x16. This atrribute is not necessary for.icoand.svgfiles.
Examples
Below are a list of tags for favicons of different filetypes:
<!-- for icos -->
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<!-- for pngs -->
<link rel="icon" type="image/png" href="/images/favicon.png" sizes="16x16" />
<!-- for jpegs -->
<link rel="icon" type="image/jpeg" href="/images/favicon.jpeg" sizes="16x16" />
<!-- for svgs -->
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
With this article at OpenGenus, you must have the complete idea of Favicon in HTML.
